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内 容 简 介 


本 书 模拟 网 站 建设 的 真实 流程 ,以 一 个 真实 的 电子 商务 网 站 “ 易 购 商 城 ”为 例 讲 述 网 站 建设 和 管理 维 
护 的 全 过 程 。 主 要 内 容 包括 网 站 规划 、IIS 服务 器 搭建 、 网 页 美工 设计 、 网 站 制作 、 网 站 测试 .网 站 发 布 和 管 
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技能 知识 点 考核 "“ 实 训 ”" 和 ”综合 任务 "的 结构 来 组 织 内 容 , 全 方位 剖析 了 网 站 设计 制作 中 的 各 个 流程 和 
拓展 领域 。 
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用 书 。 


本 书 封面 贴 有 清华 大 学 出 版 社 防伪 标签 .无 标签 者 不 得 销售 。 
版 权 所 有 ,侵权 必 究 。 侵 权 举 报 电话 : 010-62782989 13701121933 


图 书 在 版 编目 (CIP) 数 据 


网 站 建设 与 管理 基础 及 实 训 : ASP 版 / 吴 代 文 主编 . 一 北京 : 清华 大 学 出 版 社 ,2012.7 
21 世纪 面向 工程 应 用 型 计算 机 人 才 培 养 规划 教材 
ISBN 978-7-302-28090-3 


1. 网 … 工 . 匡 … 册 . 电子 商务 一 网 站 一 高 等 学 校 一 教材 N. DF713. 36 @TP393.092 
中 国 版 本 图 书馆 CIP 数据 核 字 (2012) 第 028187 号 


责任 编辑 : 同 红 梅 薛 阳 
封面 设计 : 

责任 校对 : 时 染 兰 

责任 印 制 : 


出 版 发 行 : 清华 大 学 出 版 社 
网 址 : http://www. tup. com. cn, http://www. wqbook. com 
地 址 : 北京 清华 大 学 学 研 大 厦 A 座 邮 编 : 100084 
社 总 机 : 010-62770175 邮购 : 010-62786544 
投稿 与 读者 服务 : 010-62776969 ，c-service@tup. tsinghua. edu. cn 
质量 反馈 : 010-62772015，zhiliang@tup. tsinghua. edu. cn 
课件 下 载 : http://www. tup. com. cn,010-62795954 


印 刷 者 

装 订 者 

经 销 : 全 国 新 华 书店 

开 本: 185mmX260mm ” 印 张 : 21 字 ” 数 : 511 千 字 

版 ”次 : 2012 年 7 月 第 1 版 印 ”次 : 2012 年 7 月 第 1 次 印刷 
印 数 : 1 一 000 

定 ” 价 : .00 元 


产品 编号 : 042310-01 


Fforeword 


随 着 因特网 的 迅猛 发 展 ,网 络 已 深入 到 世界 的 各 个 角落 。 网 站 作为 因特网 的 主要 组 成 
部 分 ,其 数量 和 质量 都 在 迅速 发 展 。 越 来 越 多 的 政府 部 门 企 业 ` 组 织 和 个 人 ,都 在 通过 制作 
网 页 ,建立 网 站 来 发 布 信息 和 宣传 自己 。 而 在 日 常生 活 方面 ,电子 商务 取得 了 巨大 发 展 ,网 
络 购物 现在 已 成 为 年 轻 人 的 购物 时 尚 。 人 们 对 网 站 的 美观 及 操作 性 、 交 互 性 、 安 全 性 也 有 了 
越 来 越 高 的 要 求 。 

本 书 模拟 网 站 建设 的 真实 流程 ,以 一 个 真实 的 电子 商务 网 站 “ 易 购 商城 ”为 例 讲述 网 站 
建设 和 管理 维护 的 全 过 程 。 本 书 采 用 了 模块 式 的 教材 编写 方式 ,每 个 模块 根据 “知识 储备 ”、 
“模拟 制作 任务 ”“ 知 识 点 拓展 ”“ 职 业 技 能 知识 点 考核 >“ 实 训 ” 和 “综合 任务 ”的 结构 来 组 
织 内 容 ,全 方位 剖析 了 网 站 设计 制作 中 的 各 个 流程 和 拓展 领域 。 

一 、 本 书 特点 

1. 强调 技术 应 用 能 力 .学习 能 力 和 工作 能 力 

本 教材 侧重 综合 职业 能 力 与 职业 素质 的 培养 , 融 “ 教 ,学 ,做 "为 一 体 ,以 尽 可 能 适应 以 
“能 力 本 位 ”为 主旨 的 学 生 为 主教 师 为 辅 的 新 型 教学 模式 的 需要 。 

每 一 个 模块 的 开始 部 分 都 对 本 单元 应 掌握 的 能 力 目标 、 知 识 目 标 提出 了 明确 的 要 求 , 让 
学 生 每 学 完 一 个 模块 都 感觉 很 有 收获 ,根据 模块 提供 的 任务 即 可 举一反三 地 编写 相应 功能 
模块 代码 。 

每 一 个 任务 都 通过 任务 背景 ,任务 要 求 、 任 务 分 析 、 操 作 步 骤 详 解 和 知识 点 拓展 等 部 分 
引导 ,启发 学 生 思考 ,学生 可 以 在 解决 问题 中 学 习 知识 。 通 过 任务 ,学 生 能 运用 所 学 知识 解 
决 现实 问题 ,积累 经 验 , 从 而 提高 动手 能 力 和 解决 问题 的 能 力 。 

2. 注重 解决 方法 

本 书 从 06 模块 到 12 模块 以 真实 网 站 “ 易 购 商城 ”为 例 , 带 领 学 生 一 起 进行 网 站 的 设计 
制作 ,培养 学 生 解 决 问题 的 能 力 , 主 要 是 使 学 生 学 会 使 用 其 中 的 核心 技术 实现 网 站 所 需要 的 
功能 ,并 且 可 以 举一反三 地 应 用 于 其 他 网 站 。 

3. 注重 实 训 和 可 操作 性 

本 书 相对 传统 编 书 方式 更 加 注重 实 训 和 可 操作 性 。 从 06 模块 到 12 模块 ,每 个 模块 都 
有 模拟 制作 任务 和 实 训 。 更 加 关注 教师 教学 的 可 演示 性 和 学 生 上 机 的 可 操作 性 ,注重 培养 
学 生 的 实际 动手 能 力 。 对 于 过 多 的 相关 理论 知识 ,采用 知识 拓展 的 方式 展示 给 学 生 , 这 部 分 
内 容 可 不 作为 教学 的 重点 。 

4. 代码 规范 ,注释 全 面 
书 中 的 模块 代码 在 注重 执行 效率 的 同时 ,是 编者 严格 按照 统一 代码 缩 进 、 统 一 命名 规范 
的 原则 精心 编写 的 。 代 码 注 释 规范 而 且 非 常 全 面 ,关键 代码 和 函数 几乎 每 行 均 有 注释 。 
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5. 以 真实 项 目 为 载体 ,以 模块 化 和 任务 驱动 方式 编写 

本 书 根据 编者 的 实际 教学 和 开发 经 验 , 由 浅 入 深 \ 循 序 渐进 地 讲解 了 网 站 建设 与 管理 的 
全 过 程 。 讲 解 过 程 以 模块 为 单位 ,将 一 个 复杂 任务 (网 站 建设 与 管理 的 全 过 程 ) 划 分 为 多 个 
子 模块 分 别 进行 详细 讲解 。 模 块 讲解 过 程 中 使 用 了 大 量 的 实例 和 代码 ,使 学 生 在 学 完 每 个 
模块 后 就 能 进行 实践 。 

每 个 模块 的 讲解 都 力求 做 到 “学 以 致 用 ”, 学 生 通过 本 课程 所 有 模块 的 学 习 之 后 ,都 能 自 
己 动手 制作 出 一 个 中 型 电子 商务 网 站 。 

二 、 本 书 内 容 

全 书 共 分 为 13 个 模块 ,具体 内 容 如 下 。 

01 模块: 绪论 ,介绍 了 与 网 站 相关 的 基本 常识 和 概念 ,详细 讲解 了 网 站 建设 的 基本 原 
则 和 网 站 规划 的 基本 流程 。 最 后 ,以 “ 易 购 商城 ”为 例 设计 了 一 份 电子 商务 网 站 规划 书 。 

02 模块 : 网 站 的 安装 与 配置 ,主要 介绍 了 Windows 2003 下 IIS 6.0 的 安装 ,WWW 服务 
器 的 配置 .虚拟 目录 的 设置 和 IIS 配置 数据 的 备份 等 。 

03 模块 : 网 页 设计 工具 一 一 Dreamweaver CS5, 主 要 介绍 网 页 设计 工具 Dreamweaver 
CS5 的 使 用 ,如 制作 超 链 接 , 插 入 表格 .图像 .视频 和 Flash 动画 等 网 页 元 素 。 

04 模块 : 网 站 及 网 页 的 色彩 搭配 ,主要 介绍 色彩 搭配 的 相关 知识 ,内 容 包 括 三 原色 、 常 
见 网 页 色彩 、 色 彩 的 冷暖 视觉 .网 页 的 安全 色 、 网 站 总 体 色彩 规划 与 网 页 搭配 原理 和 常见 配 
色 方 案 等 。 

05 模块 : 网 页 的 排版 布局 ,主要 讲解 页 面 的 基本 构成 .常见 的 页 面 结构 、 页 面 布局 设计 
的 基本 流程 和 常用 网 页 布局 方法 等 内 容 。 

06 模块 : 网 站 页 面 设 计 , 本 模块 以 * 易 购 商城 ?为 具体 案例 ,详细 讲述 了 在 Photoshop 中 
设计 网 站 页 面 效 果 图 的 步骤 ,并 最 终 将 整个 页 面 效 果 图 切片 生成 网 页 文件 。 

07 模块 : CSS 和 ASP 脚本 语言 ,本 模块 主要 讲解 CSS、VBScript 和 JavaScript 三 方面 的 


内 容 


08 模块 : ASP 动态 扩展 ,本 模块 主要 讲解 ASP 技术 的 特点 及 其 工作 原理 ,ASP 的 基本 
语法 和 ASP 内 建 对 象 的 使 用 方法 。 

09 模块 : 网 页 数据 库 扩展 ,本 模块 主要 讲解 ADO 对 象 模型 .ADO 访问 数据 库 的 各 种 方 
式 和 利用 常用 ADO 对 象 实现 对 数据 库 的 访问 等 内 容 。 

10 模块 : 注册 登录 ,本 模块 通过 一 个 简单 的 注册 和 登录 过 程 ,介绍 一 般 网 站 注册 和 登 
录 模 块 实现 的 基本 方法 。 

11 模块 : 商品 发 布 ,本 模块 主要 以 实例 的 形式 讲述 商品 信息 的 添加 ,修改 和 删除 等 
功能 。 

12 模块 : 购物 车 ,订单 和 在 线 支 付 , 本 模块 主要 以 实例 的 形式 讲述 购物 车 .订单 和 在 线 
支付 等 功能 的 实现 。 

13 模块 : 网 站 测试 发 布 与 宣传 推广 ,本 模块 主要 讲解 网 页 测试 ,网 站 发 布 管理 和 网 站 
宣传 推广 等 方面 内 容 。 

三 、 本 书 作者 

本 书 由 吴 代 文 任 主 编 , 张 郭 军 、 罗 维 亮 、 郭 军 军 任 副 主编 。01 模块 由 张 郭 军 编写 ,02 模 
块 由 罗 维 亮 编 写 ,03 模块 由 周 莹 编写 ,04 模块 由 罗 邓 华 、 刘 斌 编写 ,05 模块 由 曹 照 斌 、 张 洁 


名 前 言 
编写 ,06 模块 由 熊 晓 莉 、 侯 永 广 、 林 关 成 编写 ,07 模块 一 10 模块 由 吴 代 文 编写 ,11 模块 
孙 萧 寒 和 张 碧 锋 编 写 , 12 模块 、13 模块 由 郭 军 军 编写 。 全 书 由 吴 代 文 拟定 纲要 和 统一 定稿 ， 
张 郭 军 . 罗 维 亮 . 郭 军 军 参与 部 分 章节 的 稿件 审核 工作 。 在 本 书 编写 的 过 程 中 , 谢 丽 春 、 韩 小 
卫 \ 苟 建 超 和 刘 军 等 对 本 书 的 编写 提供 了 大 量 帮 助 。 另 外 ,本 书 还 获得 了 教育 部 .财政 部 第 
四 批 特色 专业 建设 点 项 目 (教育 技术 学 ,编号 TS11772) 和 2009 年 陕西 省 特色 专业 建设 点 项 
目 (教育 技术 学 ,编号 46) 支 持 , 以 及 西安 淘 花 园 网 络 科技 有 限 公司 的 技术 支持 。 在 此 一 并 
表示 感谢 ! 

对 于 书 中 不 足 和 朴 漏 之 处 ,恳请 各 位 专家 老师 和 读者 批评 指正 。 有 关 本 书 的 意见 和 建 
议 , 请 发 邮件 至 wudaiwen@foxmail. com。 


编 者 
2011 年 9 月 
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绪 人 论 


本 模块 主要 介绍 与 网 站 和 Internet 有 关 的 概念 和 技术 ,让 学 生 了 解 一 些 网 站 的 基本 概 
念 、 网 站 的 分 类 和 网 站 的 基本 要 素 等 常识 性 知识 ,并 初步 了 解 网 站 建设 的 基本 原则 和 网 站 规 
划 的 基本 流程 。 

能 力 目标 

1. 了 解 网 站 建设 的 基本 原则 

2. 熟悉 网 站 规划 的 基本 流程 

知识 目标 

1，Web 概述 

2. 网 站 的 基本 概念 

3. 网 站 的 分 类 

4. 常用 动态 网 页 语言 


知识 储备 


知识 1 Web 概述 


World Wide Web 也 称 为 万 维 网 ,是 Internet 上 一 个 非常 重要 的 信息 资源 网 ,产生 于 
20 世纪 90 年 代 初 , 它 遵 循 超 文 本 传输 协议 ,以 超 文本 或 超 媒 体 的 形式 传送 各 种 各 样 的 信 
息 ,为 用 户 提供 了 一 个 共享 和 获取 信息 的 平台 ,方便 上 网 用 户 查 阅 Internet 上 的 信息 文档 。 

Web 常用 术语 如 下 。 

Web 页 面 : 通常 指 在 浏览 器 中 所 看 到 的 网 页 ,其 实 是 一 个 单一 的 文件 。 

网 页 : 用 HTML 编写 的 文本 文件 ,包含 文字 、 表 格 、 图 像 、 链 接 、 声 音 ,动画 和 视频 等 内 容 。 

主页 : 有 时 也 称 首 页 ,是 网 站 的 第 一 个 页 面 。 通 常 ,主页 总 是 与 一 个 URL 网 址 相对 应 ， 
引导 用 户 浏览 网 站 。 

URL(Uniform Resource Locator) : 统一 资源 定位 器 ,是 一 种 唯一 标识 Internet 上 计算 
机 、 目 录 和 文件 位 置 的 命名 规则 。 它 由 资源 类 型 .存放 资源 的 主机 地 址 和 端口 以 及 资源 目录 
和 文件 名 构成 “资源 类 型 表示 信息 传输 的 协议 .如 HTTP、FTP 等 。“ 主 机 地 址 ?提供 资 
源 的 主机 IP 地 址 或 域名 。“ 端 口 ”表示 某 一 服务 器 在 该 主机 上 所 使 用 的 TCP 端口 “目录 ” 
表示 提供 服务 的 信息 资源 所 在 目录 。“ 文 件 名 ”由 基本 文件 名 和 扩展 名 两 部 分 组 成 。 

例如 : 
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http://www. tup. tsinghua. edu. cn:80/book/menu jc. asp 

其 中 ,http 表示 超 文 本 传输 协议 ,www. tup. tsinghua. edu. cn 是 服务 器 名 ,80 为 默认 端 
口号 ,book 是 文件 夹 名 ,menu_jc. asp 是 文件 名 。 

HTTP(Hyper Text Transfer Protocol) : 超 文 本 传输 协议 ,是 Internet 上 访问 WWW 
信息 资源 的 一 种 协议 ,用 来 传输 多 媒体 信息 。 

HTML(Hyper Text Markup Language): 超 文本 标记 语言 ,是 一 种 描述 文档 结构 的 语 
言 ,而 不 能 描述 实际 的 表现 形式 。HTML 使 用 描述 性 的 标记 符 ( 标 签 ) 来 指明 文档 的 不 同 格 
式 和 内 容 。 


知识 2 网 站 的 基本 概念 


1. 网 站 

网 站 是 指 由 若干 网 页 按 一 定 方式 组 织 在 一 起 , 放 在 服务 器 上 ,提供 相关 信息 资源 。 通 俗 
的 讲法 就 是 在 Internet 上 营造 的 “家 ”。 这 个 "家 ?可 以 通过 租赁 网 络 空间 或 购买 服务 器 两 种 
方式 实现 。 用 户 可 以 到 相关 网 站 租赁 虚拟 网 络 空间 来 发 布 自己 的 网 站 ,这 种 方式 通常 比较 
便宜 ; 而 购买 服务 器 需要 用 户 购买 一 台 服 务 器 并 通过 有 关 部 门 的 检验 后 接 入 Internet, 这 种 
方式 一 般 用 于 专门 的 网 络 公司 ,购买 服务 器 通常 费用 较 高 ,但 网 站 访问 速度 和 质量 更 有 保障 。 

2. 网 站 的 构成 要 素 

一 个 网 站 是 由 多 个 元 素 有 机 地 结合 而 组 成 的 Internet 空间 ,包括 以 下 几 方面 。 

(1) 域名 。 域 名 是 一 个 网 站 在 Internet 上 的 身份 证 ,就 像 企业 在 工商 局 登记 的 名 称 一 
样 。 域 名 有 国际 域名 和 国内 域名 之 分 ,国际 域名 在 全 世界 内 有 效 ; 国内 域名 只 在 国内 有 效 。 
国际 域名 以 . com、 net、. org 等 结尾 ; 而 国内 域名 以 . com. cn、. net. cn、. org. cn 等 结尾 。 

(2) IP 地 址 。IP 地 址 是 每 个 网 站 或 上 网 用 户 的 特定 网 络 地 址 ,通常 用 户 上 网 后 会 立刻 
取得 一 个 由 4 个 数字 组 成 的 IP 地址 。 对 于 直接 拨号 上 网 者 ,这 个 IP 地 址 是 全 球 唯一 的 。 
IP 地 址 由 4 个 小 于 255 的 十 进 制 数组 成 ,格式 为 xxx. xxx. xxx. xxx。 由 网 络 解析 这 个 地 
址 ,以 确立 每 个 用 户 的 身份 。 如 192. 168. 1. 1 即 为 一 个 IP 地 址 。 

(3) 网 站 资源 。 网 站 由 多 个 网 页 及 其 他 资源 文件 (图 片 动画 和 视频 等 ) 和 数据 库 组 成 ， 
网 页 只 是 一 页 信息 ,只 有 多 个 网 页 及 其 他 要 素 组 合 起 才能 算 网 站 。 


知识 3 网 站 的 分 类 


网 站 一 般 可 分 为 以 下 几 类 。 

1. 门户 网 站 

门户 网 站 (Portal Site) 或 称 大 门 网 站 .入 门 网 站 。 它 集合 了 众多 内 容 , 提 供 多 样 服务 ， 
并 尽 可 能 地 成 为 网 络 用 户 的 首选 。 目 前 比较 知名 的 中 文 门 户 网 站 有 雅虎 .新 浪 、 搜 狐 、 网 易 
和 腾讯 等 ,这 些 网 站 内 容 除了 搜索 引擎 外 ,还 包括 新 闻 、 娱 乐 .游戏 ,文化 ,体育 ,健康 、 科 技 、 
财经 ,教育 等 若干 版 块 ,以 及 网 上 短信 ,个 人 主页 空间 、 免 费 邮 箱 等 服务 项 目 。 

2. 普及 型 网 站 

企 事业 单 位 和 个 人 根据 自身 要 求 建立 和 发 布 的 以 介绍 基本 情况 、 通 信 地 址 、 产 品 和 服务 
信息 、 供 求 信息 、 人 员 招 聘 和 合作 信息 等 为 主旨 的 网 站 属于 此 类 。 该 类 网 站 以 向 客户 、 供 应 
商 \ 公 众 和 其 他 一 切 对 该 网 站 感 兴趣 的 人 宣传 推介 ,树立 网 上 形象 为 目的 ,网 站 内 容 一 般 比 
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较 全 面 。 通 过 访问 该 网 站 ,可 以 及 时 了 解 这 些 单位 的 业务 范围 .最 新 动态 、 产 品 及 价格 ,并 可 
以 通过 网 站 提供 的 用 户 咨询 服务 与 相关 部 门 进 行 在 线 信息 交流 。 此 类 网 站 包括 企业 网 站 、 
大 学 网 站 、 政 府 网 站 以 及 数量 众多 的 个 人 网 站 。 

3. 电子 商务 类 网 站 

电子 商务 类 网 站 按 类 型 分 为 B2B( 商 家 对 商家 ) 和 B2C( 商 家 对 个 人 客户 ) 两 种 ; 按照 交 
易 过 程 可 分 为 商品 检索 、 商 品 采购 、 订 单 支付 三 个 阶段 。 常 见 的 中 文 电子 商务 网 站 有 淘宝 、 
阿里 巴巴 .京东 商城 .当当 网 和 卓越 网 等 。 电 子 商务 网 站 通常 应 该 具有 如 下 功能 。 

(1) 商品 发 布 功能 。 

(2) 商品 选 购 功能 。 

(3) 具有 个 性 化 的 采购 订单 模板 ,顾客 可 以 进行 购物 组 合 比较 。 

(4)“ 购 物 车 ”内 置 的 价格 计算 模型 可 以 根据 商家 的 价格 体系 灵活 定制 。 

(5) 在 线 交 易 功 能 。 

(6) 商品 推荐 功能 ,能 根据 用 户 的 购买 习惯 向 用 户 推荐 类 似 商品 。 

4. 媒体 信息 服务 类 网 站 


这 类 网 站 是 报社 \ 杂 志 社 广播 电台 .电视台 等 传统 媒体 为 了 树立 自己 的 网 上 形象 .方便 
服务 对 象 而 建立 的 网 站 ,主要 包括 以 下 功能 。 

(1) 信息 发 布 。 

(2) 电子 出 版 。 

(3) 客户 在 线 咨询 。 

(4) 网 站 管理 。 


5. 办 公事 务 管理 网 站 

这 类 网 站 是 企业 事业 单位 为 了 实现 办 公 自 动 化 而 建立 的 内 部 网 站 , 它 主 要 包括 以 下 功 
能 模块 。 

(1) 办 公事 务 管理 。 

(2) 人 力 资源 管理 。 

(3) 财务 资产 管理 。 

(4) 网 站 管理 。 

6. 商务 管理 网 站 

它 是 企业 内 部 为 了 进行 广告 及 商品 管理 ,客户 管理 ,合同 管理 ,营销 管理 等 而 建立 的 网 
上 办 公平 台 。 

知识 4 网 站 建设 的 常用 动态 网 页 语言 

与 网 站 建设 相关 的 常用 动态 网 页 语言 有 下 列 几 种 。 

1. ASP 

ASP(Active Server Pages) 是 由 微软 创建 的 Web 应 用 开发 标准 ,服务 器 已 经 包含 在 IIS 
(Internet Information Service) 服 务 器 中 ,服务 器 将 Web 请 求 转 入 解释 器 中 ,在 解释 器 中 对 
所 有 Web 请 求 中 的 脚本 进行 分 析 , 然 后 执行 .同时 可 以 创建 COM 对 象 以 完成 更 多 的 功能 ， 
ASP 中 的 脚本 是 VBScript 和 JavaScript。ASP 网 页 文件 的 后 级 是 . asp, 网 页 可 以 包含 
HTML 标记 、 普 通 文本 .脚本 命令 以 及 COM 组 件 等 。 

2. PHP 

PHP(Pre-Hyper Text Preprocessor) 是 一 种 路 平台 的 服务 器 端 谋 入 式 脚本 语言 ,由 于 
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其 良好 的 性 能 及 免费 的 特点 ,成 为 目前 互联 网 中 非常 流行 的 一 种 应 用 开发 平台 。 它 支持 目 
前 绝 大 多 数 数据 库 。PHP 程序 可 以 运行 在 UNIX、Linux 和 Windows 操作 系统 下 。 一 般 情 况 
下 ,PHP 与 MySQL 数据 库 和 Apache Web 服务 器 是 最 佳 组 合 。PHP 网 页 文件 的 后 级 是 . php。 

3. JSP 

JSP(Java Server Page) 是 Sun 公司 推出 的 网 站 开发 语言 , 它 的 可 移植 性 好 ,支持 多 种 平 
台 ; 具有 强大 的 可 伸缩 性 ; 有 多 样 化 与 强大 的 工具 支持 。JSP 网 页 文件 的 后 级 是 .jsp。 

4. ASP.NET 

ASP. NET 是 微软 推出 的 新 一 代 基于 . NET 框架 的 动态 网 页 开发 语言 , 它 采 用 了 代码 
与 页 面 编 程 语言 相 分 离 的 编程 方式 。 而 ASP、PHP 和 JSP 是 将 脚本 语言 嵌入 到 HTML 文 
档 中 。ASP. NET 网 页 文件 的 后 级 是 . aspx。 

上 述 4 种 动态 网 页 语言 的 优点 是 : ASP 简单 易学 ,使 用 方便 ,运行 环境 配置 简单 ; PHP 
软件 免费 ,运行 成 本 低 ; JSP 开放 , 跨 平台 性 好 , 且 移 植 方便 ; ASP. NET 学 习 简单 ,开发 项 
目 速 度 快 ,与 微软 的 软件 兼容 性 好 。 

上 述 4 种 动态 网 页 语言 的 缺点 是 : ASP 属于 解释 性 的 语言 ,因此 每 次 执行 网 页 时 都 需 
要 解释 一 遍 , 所 以 相对 于 PHP 和 JSP 来 说 执行 速度 有 点 慢 。PHP 和 JSP 运行 环境 的 安装 
比较 复杂 ,相对 于 初学 者 来 说 掌握 起 来 有 点 困难 。ASP. NET 运行 会 占用 很 多 资源 ,所 以 对 
计算 机 硬件 要 求 较 高 。 

一 般 情况 下 ,PHP 适合 大 型 网 站 开发 ; JSP 在 国外 网 站 中 用 得 比较 多 ; ASP. NET 一 
般 用 于 信息 系统 开发 ; ASP 比较 适合 作为 网 站 开发 入门 语言 ,因为 简单 易学 ,而 且 目 前 网 上 
关于 它 的 资源 也 有 很 多 。 对 于 初学 者 ,ASP 是 最 合适 的 ,所 以 本 书 选择 ASP 作为 开发 动态 
网 页 的 语言 进行 讲解 。 


知识 5 网 站 建设 的 整体 规划 


随 着 全 球 信息 网 络 的 发 展 ,Internet 已 不 再 仅仅 是 一 种 技术 ,更 重要 的 是 它 已 成 为 一 种 
新 的 经 营 模 式 。 从 4C(Connection,Communication, Commerce, Co-operation) 层 次 上 彻底 
改变 了 人 类 工作 .学习 .生活 和 娱乐 的 方式 ,已 成 为 国家 经 济 和 区 域 经 济 增长 的 主要 动力 。 
Internet 正成 为 世界 最 大 的 公共 资料 信息 库 , 它 包含 无 数 的 信息 资源 ,所 有 最 新 的 信息 都 可 
以 通过 网 络 搜索 获得 。 更 重要 的 是 ,大 部 分 信息 都 是 免费 的 ,应 用 电子 商务 可 使 企业 获得 在 
传统 模式 下 所 无 法 获得 的 巨 量 商业 信息 ,在 激烈 的 市 场 竞争 中 领先 对 手 。 
网 络 是 现代 公司 的 一 个 重要 组 成 部 分 。 一 个 成 功 的 网 站 ,可 以 将 公司 信息 .产品 信息 等 
最 完整 .最 形象 ,最 具有 良好 沟通 性 地 向 全 球 展示 。 
网 站 规划 是 指 在 网 站 建设 前 对 市 场 进行 分 析 、 确 定 网 站 的 目的 和 功能 ,并 根据 需要 对 网 
站 建设 中 的 技术 、 内 容 、 费 用 ,测试 、 维 护 等 做 出 规划 。 网 站 规划 对 网 站 建设 起 到 了 计划 和 指 
导 的 作用 ,对 网 站 的 内 容 和 维护 起 到 了 定位 作用 。 

根据 不 同 的 需要 和 侧重 点 ,网 站 的 功能 和 内 容 会 有 一 定 的 差别 ,但 网 站 规划 的 基本 步 又 
是 类 似 的 ,一 般 来 说 ,一 份 完整 的 网 站 规划 应 该 包括 下 列 内 容 。 

1. 建站 前 的 市 场 分 析 

建设 网 站 之 前 应 该 对 整个 行业 的 市 场 前 景 和 发 展 空间 做 一 个 详细 的 了 解 和 分 析 , 同 时 
对 网 站 运作 的 可 行 性 做 深入 的 论证 分 析 。 
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2. 建 网 目的 

建立 网 站 的 目的 也 就 是 一 个 网 站 的 目标 定位 问题 。 网 站 内 容 和 功能 以 及 各 种 网 站 推广 
策略 都 是 为 了 实现 网 站 的 预期 目的 。 这 是 网 站 规划 中 的 核心 问题 ,需要 非常 明确 和 具体 。 
建立 网 站 可 以 有 多 种 目的 ,例如 ,从 事 网 上 商品 销售 发布 产品 信息 、 信 息 中 介 服 务 .教育 和 
培训 等 ,不 同类 型 的 网 站 其 表达 方式 和 实现 手段 是 不 一 样 的 。 

3. 域名 和 网 站 名 称 

一 个 域名 的 好 坏 对 营销 的 成 功 与 否 具有 重要 意义 ,网 站 名 称 同 域名 一 样 也 具有 重要 的 
意义 ,域名 和 网 站 名 称 应 该 在 网 站 规划 阶段 就 作为 重要 内 容 来 考虑 。 有 些 网 站 发 布 一 段 时 
间 之 后 才 发 现 域名 或 者 网 站 名 称 不 太 合适 ,需要 重新 更 改 , 不 仅 非常 麻烦 ,而 且 前 期 的 推广 
工作 几乎 没有 任何 价值 ,同时 对 自己 网 站 的 形象 也 造成 一 定 的 伤害 。 

4. 网 站 的 主要 功能 

在 确定 了 网 站 目标 和 名 称 之 后 , 接 下 来 要 设计 网 站 的 功能 了 ,网 站 功能 是 战术 性 的 ,是 
为 了 实现 网 站 的 目标 。 网 站 的 功能 是 为 用 户 提供 服务 的 基本 表现 形式 。 一 般 来 说 ,一 个 网 
站 有 几 个 主要 的 功能 模块 ,这 些 模 块 体现 了 一 个 网 站 的 核心 价值 。 

5. 网 站 技术 解决 方案 

根据 网 站 的 功能 确定 网 站 技术 解决 方案 ,应 重点 考虑 下 列 几 个 方面 。 

(1) 采用 自 建 网 站 服务 器 ,还 是 租用 虚拟 主机 。 

(2) 选择 操作 系统 ,用 UNIX,Linux 还 是 Windows 2003/NT。 

(3) 分 析 投 入 成 本 功能、 开发 ,稳定 性 和 安全 性 等 。 

(4) 采用 系统 性 的 解决 方案 ,如 选择 IBM HP 等 公司 提供 的 企业 上 网 方案 .电子 商务 
解决 方案 ,还 是 自行 开发 。 

(5) 网 站 安全 性 措施 , 防 黑 、 防 病毒 方案 。 

(6) 相关 的 程序 开发 ,如 网 页 程序 ASP、JSP、PHP、CGI 和 数据 库 程序 等 。 

6. 网 站 内 容 规 划 

不 同类 别 的 网 站 ,在 内 容 方面 的 差别 很 大 ,因此 网 站 内 容 规 划 没 有 固定 的 格式 , 需 根据 
不 同 的 网 站 类 型 来 制定 。 例 如 ,一 般 信息 发 布 型 企业 网 站 内 容 应 包括 : 公司 简介 、 产 品 介 
绍 、 服 务 内 容 \ 价 格 信息 、 联 系 方式 .网 上 订单 等 基本 内 容 ; 电子 商务 类 网 站 要 提供 会 员 注 
册 .详细 的 商品 服务 信息 、 信 息 搜索 查询 .订单 确认 、 付 款 . 个 人 信息 保密 措施 .相关 帮助 等 
综合 门户 类 网 站 则 将 不 同 的 内 容 划分 为 许多 独立 的 或 有 关联 的 频道 。 有 时 ,一 个 频道 的 内 
容 就 相当 于 一 个 独立 网 站 的 功能 。 

7. 网 站 测试 和 发 布 

在 网 站 设计 完成 之 后 ,应 该 进行 一 系列 的 测试 , 当 一 切 测试 正常 之 后 ,才能 正式 发 布 。 
主要 包括 以 下 测试 内 容 。 

(1) 网 站 服务 器 的 安全 性 、 稳 定性 。 

(2) 各 种 超 链接 、 图 像 .插件 和 数据 库 等 是 否 工作 正常 。 

(3) 在 接 入 速率 不 同 的 情况 下 网 页 的 下 载 速度 。 

(4) 网 页 对 不 同 浏览 器 的 兼容 性 。 

(5) 网 页 在 不 同 显示 器 和 不 同 显 示 模 式 下 的 表现 等 。 
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8. 网 站 推广 与 维护 
网 站 推广 活动 一 般 发 生 在 网 站 正式 发 布 之 后 ,当然 也 不 排除 一 些 网 站 在 筹备 期 间 就 开 
始 宣传 的 可 能 。 网 站 推广 是 网 络 营 销 的 主要 内 容 , 可 以 说 ,大 部 分 的 网 络 营销 活动 都 是 为 了 
网 站 推广 的 需要 ,例如 ,发布 新 闻 、 搜 索引 擎 登记 、 交 换 链 接 和 网 络 广告 等 。 
因此 ,在 网 站 规划 阶段 就 应 该 对 将 来 的 推广 活动 有 明确 的 认识 和 计划 ,而 不 是 等 网 站 建 
成 之 后 才 考 虑 采取 什么 样 的 推广 手段 。 由 此 也 可 以 看 出 ,网 站 规划 并 不 仅仅 是 为 了 网 站 建 
设 的 需要 ,而 是 为 了 整个 网 络 营销 活动 的 需要 。 
网 站 发 布 之 后 ,还 要 定期 进行 维护 ,主要 包括 下 列 几 个 方面 。 

(1) 服务 器 及 相关 软 硬 件 的 维护 ,对 可 能 出 现 的 问题 进行 评估 ,制定 响应 时 间 。 

(2) 网 站 内 容 的 更 新 .调整 等 ,将 网 站 维护 制度 化 .规范 化 。 

9. 网 站 财务 预算 

除了 上 述 各 种 技术 解决 方案 、 内 容 \ 功 能 、 推 广 、 测 试 等 应 该 在 网 站 规划 书 中 详细 说 明之 
外 ,网 站 建设 和 推广 的 财务 预算 也 是 重要 内 容 , 网 站 建设 和 推广 在 很 大 程度 上 受到 财务 预算 
的 制约 ,所 有 的 规划 都 只 能 在 财务 许可 的 范围 之 内 。 财 务 预算 应 按照 网 站 的 开发 周期 ,包含 
网 站 所 有 的 费用 明细 清单 。 

具体 来 讲 , 可 以 参照 如 图 1-1 所 示 的 流程 来 建设 企业 网 站 。 


风格 设计 


网 站 策 数据 库 设计 | “一 一》 | 注册 域名 
划 创 意 大 一 


程序 设计 


租用 空间 
网 页 制作 
上 传 文件 


图 1-1 网 站 建设 流程 


知识 6 电子 商务 网 站 的 解决 方案 


针对 以 上 的 网 站 规划 流程 ,一 个 电子 商务 网 站 的 解决 方案 主要 包括 以 下 内 容 。 

(1) 制定 一 份 翔实 的 电子 商务 市 场 评估 和 定位 策划 书 ,确立 网 站 的 目标 ,分 析 网 络 目标 
客户 群 . 现 有 的 竞争 对 手 , 分 析 网 站 运行 取胜 的 机 会 ,分析 本 企业 建立 电子 商务 网 站 的 可 行 
性 ,组 织 人 员 ,并 制定 相应 策略 和 正确 的 操作 步骤 。 

(2) 策划 短期 和 长 期 一 利 项 目 .发现 和 分 析 企 业 可 开展 的 网 上 业务 ,寻求 电子 商务 特点 
和 网 上 贸易 发 展 的 支撑 点 ,同时 也 要 考虑 到 企业 电子 商务 长 远 的 发 展 规划 。 

(3) 设计 理想 的 域名 ,并 注册 申请 。 

(4) 选择 合适 的 软 硬 件 和 ISP(Internet 服务 提供 商 ) ,确定 网 站 的 内 容 结 构 .核算 制作 
成 本 ,设计 网 站 开发 进度 ,并 分 析 主 流 技术 和 产品 或 服务 外 的 附加 有 价值 的 信息 内 容 。 
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(5) 收集 网 站 内 容 信息 ,创建 页 面 与 组 织 网 页 链接 ,开发 与 设计 数据 库 , 制 作 导 航 页 面 ， 
设计 网 站 的 检索 功能 和 可 能 与 用 户 检索 排名 密切 相关 的 关键 词 。 

(6) 将 网 站 中 的 主要 页 面向 世界 各 大 搜索 引擎 和 中 国 主要 的 搜索 引擎 登记 注册 。 

(7) 制定 在 线 广告 计划 ,最 大 程度 地 发 挥 广告 效应 ,以 求 得 最 大 的 投入 产 出 比 。 

(8) 制定 与 电子 商务 密切 相关 的 新 闻 组 .电子 邮件 组 .电子 公告 牌 的 信息 ,使 网 络 营销 发 
挥 最 大 的 效益 ; 编写 交易 邮件 ,提高 交易 邮件 的 响应 率 ,直接 增加 网 上 销售 的 份额 和 利润 。 

(9) 开发 网 站 管理 数据 库 , 以 便 及 时 地 发 布 .维护 和 更 新 网 站 信息 ,并 快速 地 接收 用 户 
的 反馈 信息 。 

(10) 建立 网 络 交易 的 在 线 支付 平台 。 

(11) 设置 防火 墙 , 制 定 网 站 维护 及 安全 防卫 措施 。 

(12) 统计 用 户 访问 网 站 的 流量 ,并 及 时 有 效 地 监控 网 站 在 搜索 引擎 中 的 排名 ,同时 密 
切 地 监督 竞争 对 手 。 

(13) 提供 中 英文 等 翻译 。 

电子 商务 网 站 一 般 包 括 以 下 主要 内 容 。 

1. 产品 展示 

详细 介绍 企业 产品 。 向 客户 提供 的 最 新 企业 产品 介绍 和 详细 的 产品 展示 图 ,有 些 实力 
网 站 还 利用 多 媒体 技术 ,使 客户 更 直观 地 了 解 产品 的 全 貌 。 

2. 网 上 客服 和 电话 客服 

采用 在 线 交 互 技术 ,针对 客户 反馈 的 意见 ,自动 或 手动 回复 和 处 理 客户 反馈 。 同 时 还 应 
该 提供 电话 客服 系统 ,方便 用 户 及 时 反馈 信息 。 并 及 时 汇总 、 传 输 到 企业 的 决策 部 门 ,为 企 
业 决 策 提供 依据 。 

3. 电子 交易 功能 

通过 和 银行 .第 三 方 支付 公司 合作 ,建立 电子 交易 系统 ,客户 可 以 在 网 上 订货 、 付 款 , 企 
业 也 可 以 自动 处 理 订单 .自动 配 货 。 

4. 数据 库 检 索 功 能 

很 多 网 站 的 内 容 丰 富 ,产品 种 类 繁多 , 想 让 客户 第 一 时 间 找 到 自己 想 要 浏览 的 信息 ,就 
必须 提供 强大 的 数据 库 检索 功能 。 

5. 售后 服务 

良好 的 售后 服务 为 顾客 购买 产品 解决 了 后 顾 之 忧 ,更 能 为 公司 建立 良好 的 形象 。 这 一 
部 分 主要 是 介绍 公司 售后 服务 的 有 关 条 款 和 规定 ,让 客户 对 公司 的 售后 服务 情况 有 所 了 解 ， 
从 而 在 对 比 的 基础 上 购买 公司 的 产品 。 

6. 企业 简介 

介绍 企业 的 发 展 历程 .企业 的 概况 .组 织 结构 .员工 队伍 等 企业 的 基本 信息 ,多 采用 图 文 
并 茂 的 网 页 来 表现 。 

7. 企业 的 最 新 动态 

介绍 企业 的 一 些 最 新 决策 ,促销 活动 和 礼品 派送 等 。 

8. 企业 的 联系 方式 

将 企业 的 网 站 地 址 E-mail、 电话 ,传真 等 多 种 联系 方式 公布 在 网 上 ,方便 新 老 客户 联系 。 
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引 例 : 欣赏 三 个 不 同类 型 网 站 的 首页 
如 图 1-2、 图 1-3 和 图 1-4 所 示 分 别 是 三 个 不 同类 别 网 站 的 首页 。 
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图 1-2 淘宝 网 首页 
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图 1-3 京东 商城 首页 
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图 1-4 新 浪 网 首页 
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“ 易 购 商 城 ” 网 站 规划 书 


1. 市 场 分 析 

随 着 我 国 经 济 的 持续 发 展 和 人 们 消费 观念 的 改变 ,网 络 购物 已 经 逐渐 被 人 们 所 接受 , 尤 
其 被 伴随 着 互联 网 长 大 的 年 青 一 代 所 接受 。2011 年 网 购 规模 约 为 1000 亿 , 占 社会 消费 品 
零售 总 额 的 5.63%。 且 这 个 比率 是 从 2003 年 的 0.06% 增 长 到 2011 年 的 5. 63% ,9 年 来 一 
直 保 持 一 个 快速 增长 的 趋势 ,如 图 1-5 所 示 ( 数 据 来 源 于 中 商情 报 网 ) 。 

由 图 1-5 可 以 看 出 ,2011 年 的 网 购 规模 约 占 社 会 消费 品 零售 总 额 的 5. 63% ,这 个 比例 
相对 来 说 还 是 比较 少 的 。 在 未 来 几 年 网 购 规模 还 会 有 较 大 的 增长 空间 。 

目前 ,在 我 国 从事 B2C 网 上 电子 商务 的 企业 主要 有 京东 商城 .卓越 网 ,当当 网 和 凡 客 
等 。 它 们 的 市 场 占有 率 如 图 1-6 所 示 ( 数 据 来 源 于 中 商情 报 网 ) 。 

从 图 1-6 可 以 看 出 ,目前 市 场 占 有 率 最 大 的 京东 商城 为 33. 9% 。 但 也 没有 占据 绝对 统 
治 地 位 。 随 着 我 国 网 购 规模 的 不 断 增 大 ,其 他 企业 还 是 有 机 会 的 。 因 此 ， 易 购 商 城 ? 有 限 公 
司 打算 涉足 互联 网 电子 商务 领域 .规划 建设 一 个 电子 商务 网 站 * 易 购 商 城 ”。 销 售 产品 主要 
以 家 电 数 码 、 家 居 用 品 和 化 妆 品 等 为 主 。 
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图 1-6 中 国 B2C 网 上 购物 系统 市 场 占有 率 份额 图 


2. 网 站 的 目的 及 功能 规划 

电子 商务 (E-Commerce) 交 易 的 个 性 化 、 自 由 化 可 为 企业 创造 无 限 商 机 ,降低 成 本 ,同时 
可 以 更 好 地 建立 同 客户 ,经销 商 及 合作 伙伴 的 关系 。 为 此 ,我 们 规划 一 个 电子 商务 网 站 “ 易 
购 商 城 ” 网 站 的 主要 功能 有 产品 展示 .产品 发 布 .产品 推送 、 售 后 服务 和 企业 论坛 等 。 

该 网 站 旨 在 密切 ” 易 购 商城 ”有限 公 司 同 其 合作 伙伴 、 经 销 商 、 客 户 和 浏览 者 之 间 的 关 
系 ,优化 企业 经 营 模式 ,提高 企业 运营 效率 。 采 用 最 新 的 技术 架构 和 应 用 系统 平台 ,协助 公 
司 优化 复杂 的 商业 运作 流程 ,以 减少 产品 在 市 场 上 的 流通 时 间 ,提高 资金 的 周转 率 和 利用 效 
率 , 最 终 提 高 公司 利润 。 

3. 网 站 的 内 容 规划 
网 站 名 称 :“ 易 购 商 城 ”。 
站 主题 : 通过 网 站 宣传 ,树立 企业 形象 ,提高 企业 知名 度 。 
站 语言 : 简体 中 文 。 
站 风格 : 以 暖色 调 为 主 ,给 人 以 家 的 感觉 ,主题 鲜明 突出 (购物 上 易 购 ,省 钱 又 轻松 )， 
要 点 明确 ,以 简单 明确 的 语言 和 画面 体现 站 点 的 主题 ,表现 网 站 的 个 性 和 情趣 ,办 出 网 站 的 
特点 。 


站 内 容 设计 应 注意 以 下 几 点 。 

(1) 要 提供 一 个 友好 展示 商品 信息 的 平台 ,对 商品 的 展示 要 多 媒体 化 ,除了 可 以 利用 图 
片 展示 外 ,还 能 利用 视频 和 动画 展示 。 

(2) 首页 应 该 要 有 最 新 商品 、 推 荐 商品 、 热 销 商 品 和 销售 排行 等 栏目 ,以 便 引导 用 户 购 


& 01 模 块 ”绪论 
买 , 激 起 用 户 的 购买 欲望 。 

(3) 由 于 网 站 商品 较 多 ,所 以 应 该 提供 快速 检索 商品 的 功能 。 

(4) 在 网 站 商品 分 类 和 栏目 设置 方面 ,要 注意 方便 用 户 浏览 ,以 用 户 能 最 快 找到 商品 为 


目的 。 
(5) 网 站 还 应 支持 折扣 、 秒 杀 和 团购 等 活动 。 
4. 网 站 设计 


网 页 设计 作为 一 种 视觉 语言 ,特别 讲究 编排 和 布局 ,虽然 主页 的 设计 不 等 同 于 平面 设 
计 , 但 它们 有 许多 相近 之 处 。 版 式 设计 通过 文字 图 形 的 空间 组 合 ,表达 出 和 谐 之 美 。 

多 页 面 站 点 页 面 的 编排 设计 要 求 把 页 面 之 间 的 有 机 联系 反映 出 来 ,特别 要 处 理 好 页 面 
之 间 和 页 面 内 的 秩序 与 内 容 的 关系 。 为 了 达到 最 佳 的 视觉 表现 效果 ,设计 时 考虑 到 整体 布 
局 的 合理 性 ,使 浏览 者 有 一 个 流畅 的 视觉 体验 。 

“ 易 购 商城 "有 限 公 司 网 站 设计 时 应 做 到 以 下 几 点 。 

(1) 网 站 的 主页 应 能 够 给 顾客 比较 强烈 和 突出 的 印象 ,要 突出 “ 易 购 商城 "有 限 公 司 的 
特点 和 风格 。 设 计 首 先 要 抓 住 * 易 购 商 城 * 有 限 公 司 在 同行 业 中 的 突出 特点 ,以 增加 浏览 者 
的 兴趣 ,挖掘 潜在 客户 ; 其 次 要 突出 “ 易 购 商 城 * 有 限 公 司 的 服务 宗旨 、 服 务 特 色 和 产品 特 
点 。 显 著 位 置 留 给 重点 宣传 栏目 或 更 新 最 多 的 栏目 ,结合 网 站 栏目 设计 在 首页 导航 上 突出 
层次 感 ,使 客户 渐进 接受 。 

(2) 网 页 结构 设计 合理 ,层次 清楚 。 为 了 将 丰富 的 含义 和 多 样 的 形式 组 织 成 统一 的 页 
面 结构 ,形式 .语言 必须 符合 页 面 的 内 容 。 灵 活 运用 各 种 手段 ,通过 空间 文字、 图 形 之 间 的 
相互 关系 建立 整体 的 均衡 状态 ,产生 和 谐 的 美感 。 点 . 线 , 面 相 结合 ,充分 表达 完美 的 设计 意 
境 ,使 顾客 可 以 从 主页 得 知 自己 应 查 的 方向 。 

(3) 网 页 内 容 应 全 面 ,尽量 涵盖 顾客 普遍 所 需 的 信息 。 

(4) 页 面 的 链接 应 方便 浏览 ,传输 速度 和 图 片 的 下 载 速度 快 ,应 注意 避免 死 链 接 、 图 像 
不 显示 等 情况 。 

5. 网 站 的 技术 解决 方案 、 维 护 及 测试 

网 站 拟 用 Windows 2003 Server 作为 服务 器 操作 系统 ,公司 配备 相应 的 服务 器 主机 ， 
Web 服务 器 使 用 IIS。 动 态 网 页 编程 语言 选择 目前 最 为 成 熟 且 应 用 广泛 的 语言 。 

为 了 保证 公司 网 站 运行 的 安全 , 拟 从 以 下 几 个 方面 提高 网 络 运 营 的 安全 性 。 

(1) 局 域 网 安全 措施 。 

局 域 网 采用 广播 方式 ,在 同一 个 广播 域 中 可 以 侦 听 到 在 该 局 域 网 上 传输 的 所 有 信息 是 
不 安全 的 。 此 时 可 对 局 域 网 进行 网 络 分 段 ,将 非法 用 户 与 网 络 资源 相互 隔离 ,从 而 达到 限制 
用 户 非 法 访问 的 目的 。 分 段 可 采用 物理 或 逻辑 分 段 的 形式 。 

物理 分 段 : 按 计算 机 所 在 的 物理 地 点 来 划分 。 

逻辑 分 段 : 按 计 算 机 的 用 途 划 分 ,不 管 所 在 的 地 理 位 置 ,形成 虚拟 网 段 (VLAN)。 如 企 
业 的 服务 器 系统 单独 作为 一 个 VLAN, 重 要 部 门 (财务 、 人 事 .销售 、 生 产 等 ) 的 计算 机 系统 
分 别 作为 独立 的 VLAN。 

将 整个 网 络 分 成 若干 个 虚拟 网 段 (IP 子 网 ) ,各 子 网 之 间 无 法 直接 通信 ,必须 通过 路 由 
器 .路 由 交换 机 、 网 关 等 设备 进行 连接 ,可 利用 这 些 中 间 设 备 的 安全 机 制 来 控制 各 子 网 间 的 
访问 。 
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(2) Internet 互联 安全 措施 。 
网 络 安全 是 Internet 使 用 者 长 期 担心 的 问题 ,也 是 人 们 关心 的 焦点 。 在 维护 网 络 安全 
的 措施 中 ,防火墙 是 应 用 最 普遍 、 提 供 基 本 的 网 络 防范 功能 的 一 种 有 效 手段 。 防 火 墙 是 设置 
在 不 同 网 络 ( 内 部 网 和 公共 网 ) 或 不 同 的 网 络 安全 域 之 间 的 设备 。 它 负责 过 滤 .限制 和 分 析 ， 
完成 安全 控制 ,监控 和 管理 的 功能 。 防 火 墙 是 网 络 之 间 一 种 特殊 的 访问 控制 设施 ,在 
Internet 与 内 部 网 之 间 设 置 一 道 屏障 ,防止 黑客 进入 内 部 网 。 由 用 户 制 定安 全 访问 策略 , 抵 
御 黑 客 的 侵袭 ,主要 方法 有 IP 地 址 过 滤 、 服 务 代理 等 。 

(3) 数据 安全 措施 。 

数据 加 密 技术 是 为 提高 信息 系统 及 数据 的 安全 性 和 保密 性 ,使 得 数据 以 密 文 的 方式 进 
行 传输 和 存储 ,防止 数据 在 传输 过 程 中 被 别人 窃听 、 算 改 。 数 据 加 密 是 所 有 数据 安全 技术 的 
核心 。 
网 站 制作 完 之 后 还 需要 进行 功能 测试 ,性 能 测试 .安全 性 测试 .浏览 器 兼容 性 测试 ,链接 
测试 和 代码 合法 性 测试 等 。 
6. 网 站 的 发 布 与 推广 
网 站 发 布 后 ,可 以 从 以 下 几 个 方面 推广 网 站 。 
(1) 利用 自己 的 客户 资源 推广 。 
网 站 建 好 后 ,首先 将 它 介 绍 给 公司 的 客户 。 他 们 对 公司 的 网 站 是 感 兴趣 的 。 因 为 他 们 
通过 公司 的 网 站 可 以 更 方便 快捷 地 了 解 和 查询 到 公司 的 信息 ,可 以 更 加 方便 地 与 公司 沟通 。 
所 以 ,这 些 客户 是 公司 网 站 的 忠实 访问 者 。 

(2) 通过 搜索 引擎 推广 。 

网 站 做 好 后 ,就 去 Google 百度 ,中文 雅虎 搜狐、 网 易 等 网 站 上 进行 搜索 引擎 登记 ,以 
便 让 更 多 检索 ,查找 同行 业 资讯 的 人 查找 到 公司 的 网 站 。 

(3) 利用 自己 的 网 站 推广 。 

网 站 建 好 后 ,不 断 更 新 自己 的 网 站 内 容 , 这 样 会 给 访问 者 留 下 好 的 印象 ,增加 回头 率 ; 
把 自己 的 促销 广告 放 到 网 上 .让 客户 产生 访问 兴趣 。 

(4) 利用 其 他 网 站 推广 。 

与 相关 网 站 交换 首页 广告 .友情 链接 ,在 全 国 各 大 能 发 布 信 息 、 广 告 .留言 及 论坛 的 网 站 
上 发 布 广告 信息 。 

(5) 利用 自己 的 服务 和 促销 活动 推广 。 

公司 如 有 促销 活动 或 其 他 大 的 活动 , 均 可 在 网 上 大 肆 宣 传 ,将 这 些 信息 放 在 网 站 后 ,对 
客户 就 有 吸引 力 。 同 时 可 将 信息 (广告 ) 发 布 到 那些 能 发 布 信息 的 网 站 ,以 吸引 更 多 的 访客 。 

(6) 利用 传统 媒体 推广 。 

适当 在 报刊 .电台 .路 牌 等 传统 媒体 发 布 网 站 广告 结合 促销 活动 做 一 些 街道 横幅 广告 
促销 网 站 ,还 可 将 网 址 印刷 在 公司 的 信 敌 .信封 .名 片 等 宣传 资料 上 ,让 更 多 的 人 了 解 公司 
网 站 。 

通过 上 述 的 宣传 和 推广 ,就 可 以 提高 网 站 的 访问 率 。 访问 率 越 高 ,了 解 企业 和 产品 的 人 
就 越 多 ,就 可 以 在 这 些 访客 中 发 展 一 些 作为 公司 的 客户 ,并 利用 网 站 寻求 公司 的 合作 伙伴 ， 
最 终 达 到 利用 网 站 产生 经 济 效益 的 目的 。 


7. 网 站 的 经 费 预 算 

网 站 的 经 费 预算 从 以 下 几 个 方面 考虑 。 
(1) 网 站 制作 费用 。 

(2) 服务 器 主机 购买 费用 。 

(3) 租用 ISP 带宽 费用 。 

(4) 域名 使 用 费用 。 

(5) 网 站 日 常 维护 和 其 他 耗材 费用 。 


职业 技能 知识 点 考核 


1. 填空 题 
(1)“ 网 站 ”是 
(2)“ 网 页 ”是 。 


(3) 在 网 址 http://www. tsinghua. edu. cn: 80/publish/th/index. html 中 , http 是 


,www. tsinghua. edu. cn 是 ，80 是 


index. html 是 
2. 简 答题 
(1) 简 述 ASP 语言 相对 PHP、JSP 及 ASP. NETi 
(2) 简 述 常用 网 站 的 种 类 。 


五 言 
ee] 


01 模 块 ”绪论 
< 


,publish/th 是 


的 优 缺 点 。 


网 站 的 安装 与 配置 


本 模块 为 动态 网 站 开发 解决 环境 搭建 问题 。 主 要 介绍 网 站 的 安装 与 配置 ,内 容 包 括 
Windows 2003 下 IIS 6.0 的 安装 `\WWW 服务 器 的 配置 .虚拟 目录 的 设置 和 IIS 配置 数据 的 
备份 等 。 

能 力 目标 

1. Windows 2003 下 IIS 6.0 的 安装 

2. WWW 服务 器 的 配置 

3. 虚拟 目录 的 设置 

4. IIS 配置 数据 的 备份 

知识 目标 

1. IIS 概 述 

2. IIS 主 目录 和 虚拟 目录 的 区 别 


知识 储备 


知识 1 Windows 2003 下 IIS 6.00 的 安装 


IIS 6. 0 是 专 为 Windows 2003 设计 的 Web 服务 器 软件 ,安装 方法 是 插入 Windows 
2003 安装 光盘 , 单 击 “开始 ”| 控制 面板 "| * 添 加 /删除 程序 "| * 添 加 /删除 Windows 组 件 ”， 
然后 出 现 如 图 2-1 所 示 的 界面 . 勾 选 “应 用 程序 服务 器 ”, 单 击 “ 下 一 步 " 按 钮 即 可 。 

当 安 装 过 程 中 再 次 提示 插入 光盘 时 , 单 击 “ 确 定 ” 按 钮 即 可 ,如 图 2-2 所 示 。 

然后 一 直 单 击 “ 下 一 步 ” 按 钮 即 可 完成 IIS 6.0 的 安装 。 安 装 完 IIS 6. 0 后 还 需要 在 
“Internet 信息 服务 (IIS) 管 理 器 "|*Web 服务 扩展 ”中 允许 ASP 访问 Web 服务 器 ,如 图 2-3 
所 示 。 


知识 2 WWW 服务 器 的 配置 


选择 “开始 ”|“ 所 有 程序 ”| “管理 工具 ”|“Internet 信息 服务 管理 器 "命令 ,或 者 选择 “ 开 
始 ”1“ 管 理工 具 ”|“Internet 信息 服务 管理 器 "命令 。 最 后 打开 “Internet 信息 服务 (IIS) 管 理 
器 ”窗口 ,如 图 2-4 所 示 。 

右 击 已 存在 的 “默认 网 站 ”, 选 择 “ 属 性 ”命令 , 即 可 开始 配置 IIS 的 Web 站 点 。 每 个 站 
点 都 具有 唯一 的 由 三 个 部 分 组 成 的 标识 ,用 来 接收 和 响应 请 求 的 分 别 是 IP 地 址 、TCP 端口 


02 模 块 ” 网 站 的 安装 与 配置 


& 


Tindors 钥 件 
可 以 添加 或 映 除 Windows 的 组 件 。 


Se eee 


起 伯 CD: 
ET Er 


口 成 远程 存储 4.3 上 
口 徊 证 书 服务 1.4 上 3 
门 时 终端 服务 器 0.0WB S| 


描述 : 种 ASP. 了 ET ，Internet 信息 服务 (IIS) 和 应 用 程序 服务 器 控制 


所 需 磁 盘 空间 : 16.5 MB 
可 用 而 盘 空 间 : 11492.3 中 A 


EF-sv3) Cm 


图 2-1 “Windows 组 件 向 导 ” 对 话 框 


Windows 钥 件 向 导 


正在 配置 组 件 
安装 程序 正在 根据 您 的 请 求 进行 配置 更 改 。 


ES) 请 稍 侠 ， 安 装 程序 正在 配置 姐 件 。 所 花 时 间 取决 于 选 定 的 组 件 。 


状态 :正在 复制 文件 


€ 请 格 标 a Pack 2 CD-ROM 
EE 人 
-一 个 软盘 或 网 络 服务 器 ) 了 
1 Pe “确定 ”。 


图 2-2 “插入 磁盘 "提示 框 


和 主机 头 值 。 浏 览 器 访问 IIS 时 的 顺序 是 这 样 的 : IP 地 址 习 端 口 一 主机 头 一 站 点 主 目录 一 
站 点 默认 文档 。 所 以 在 配置 IIS 时 应 该 按照 访问 顺序 依次 进行 。 

第 一 步 ,配置 IP 地 址 和 主机 头 。 

这 里 可 以 指定 Web 站 点 的 IP 地 址 ,如 果 没 有 特别 需要 ,可 选择 “全 部 未 分 配 ”, 如 图 2-5 
所 示 。 

单 击 图 2-5 中 的 “高 级 ”按钮 ,在 弹出 的 “高 级 网 站 标识 ”对 话 框 中 选择 “默认 值 ” 后 单 击 
“编辑 ”按钮 。 在 弹出 的 “添加 /编辑 网 站 标识 ”对 话 框 中 可 编辑 IP 地 址 、TCP 端口 和 主机 头 
值 等 属性 ,如 图 2-6 所 示 。 

如 指定 了 多 个 主机 头 , 这 时 “IP 地 址 ”一 定 要 选 为 全 部 未 分 配 ”; 如 果 IIS 只 有 一 个 站 
点 , 则 无 须 添加 主机 头 标识 。Web 站 点 的 默认 TCP 端口 是 80 ,如果 修改 了 TCP 端口 , 则 访 
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这 


net 信息 服务 (LIS) 管理 器 

入 文件 E) 操作 他 查看 ) 窗口 外 ” 才 助 人 

和” 国 晕 四 本 国 国 时 有) 

恒 Internet 信息 服务 

日 瘟 UsER 本 地 计算 机 ) 
用 -J 应 用 程序 池 Yeb 服务 扩展 : 
上 由 司 网 站 


也 所 有 未 知 ISAPI 扩展 
外 I 了 了 所 有 未 知 cc 扩展 


ET Web 


禁止 所 有 Web 服务 扩展 
向 打开 帮助 


上 扩展 人 本 玲 7 


图 2-3 在 Web 服务 扩展 中 允许 ASP 


下 Internet 信息 服务 IIS) 管理 器 
久 文件 和 ) 操作 查看 如 窗口 如 帮助 如 
和 和 | 园 XX 欠 日 世贸 国 旦 Yai 


巍 Internet 信息 服务 路 径 
局 昔 VSzs 二 地 计算 机 ) Di\engex 
由 - 和 读 vebsite_wp Eb 
避 倪 默认 网 站 时 


DTestsitel 
由 上 Web 服务 扩展 Drebdesien 


De 
Biisstart. htn 
paeerror gif 


图 2-4 “Internet 信息 服务 (TIS) 管 理 器 "窗口 


问 者 需要 输入 http://IP: 端 口 /, 才 能 够 进行 正常 访问 。 

第 二 步 ,指定 站 点 主 目录 。 

主 目录 是 用 来 存放 站 点 文件 的 位 置 ,默认 是 “系统 盘 :\inetpub\wwwroot”, 如 图 2-7 所 
示 。 可 以 选择 其 他 目录 作为 存放 站 点 文件 的 位 置 ,直接 单 击 “ 浏 览 ” 按 钮 选择 路 径 即 可 。 这 


TCP 请 口 加 ): 

连接 

连接 超时 外); 

回 保 持 HTTP 连接 四 


回 局 用 日 志 记录 @) 


Ped 
[Sc 扩展 目 志文 伯 格 式 


默认 同 站 尾 性 
ET 
此 网 站 的 多 个 标识 


添加 .| |_ 山 除 四 | [ 编 各 到) 


图 2-6 “添加 /编辑 网 站 标识 "对 话 框 


里 还 可 以 选择 访问 权限 ,例如 “目录 浏览 "等 。 通 常 不 要 给 访问 者 开放 “ 写 入 ”权限 ,这 样 可 能 
会 引起 安全 问题 。 

第 三 步 , 设 定 站 点 默认 文档 。 

每 个 网 站 都 会 有 默认 文档 ,默认 文档 就 是 访问 者 访问 网 站 时 首先 要 访问 的 那个 文件 , 即 
一 个 网 站 的 首页 ,例如 index. htm .index. html .index. asp 和 default. asp 等 。 默 认 文档 可 以 
在 “默认 网 站 ”| 文档 ?选项 卡 中 设置 ,同时 还 可 以 设置 默认 文档 的 顺序 ,如 图 2-8 所 示 。 
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但。 网 站 建设 与 管理 基础 及 实 训 ASP 届 和 


菊 认 网站 尾 性 
目录 安全 性 HIP 头 自 定 义 错误 
网 站 性 能 ISAFI 征 选 器 主 目录 文档 
此 资源 的 内 容 来 自 : 
加 王 和 人 机 上 的 目录 中 
加 另 一 台 计 算 机 上 的 共享 &) 
个 重 定向 到 VELQD 


本 地 路 径 CC); 由 Vinetpubvwwwroot 


口 脚本 资源 访问 ID) 回 记录 访问 四 


回 读 职 @) 回 索 引 | 资源) 
Os 和 VW 
口 目 录 浏览 @) 


应 用 程序 设置 

应 用 程序 名 @) : 歌 认 应 用 程序 
开始 位 置 ; 二. 认 网 站 > 
执行 权限) : 纯 半 本 
应 用 程序 池 加 ; DefaultAppPool 


图 2-7 指定 站 点 主 目录 


默认 网站 尾 性 


目录 安全 性 
性 能 


启用 默认 内 容 文档 此) 


Default. htn 
Default. asp 
index. htm 

iisstart. htm 


口 启用 文档 页 脚 @) 
有 IML 格式 的 页 脚 列 烙 的 Yeb 服务 器 返回 的 每 一 个 文 


图 2-8 设置 网 站 默认 文档 


提示 : 

(1) 这 里 的 默认 文档 是 按照 从 上 到 下 的 顺序 读 取 的 , 即 先 访问 第 一 个 ,如 果 找 不 到 ,再 
访问 第 二 个 ,以 此 类 推 。 

(2) 默认 文档 的 顺序 可 以 通过 其 旁边 的 上 下 箭头 来 改变 。 

(3) 如 果 要 运行 JSP、PHP 或 . NET 网 站 ,可 以 添加 index. jsp、index. php 或 index. 
aspx 等 作为 默认 文档 。 


& 
知识 3 设置 虚拟 目录 外 


虚拟 目录 是 为 服务 器 硬盘 上 不 在 主 目录 下 的 一 个 物理 目录 指定 一 个 “别名 ”。 使 用 虚拟 
目录 不 仅 便 于 用 户 输入 ,而 且 还 更 加 安全 。 具 体 设置 步骤 如 下 。 
(1) 选择 “开始 "1“ 管 理工 具 ”|“Internet 信息 服务 (IIS) 管 理 器 ”命令 ,展开 服务 器 的 
名 称 。 
(2) 在 左 侧 窗 格 右 击 “ 默 认 网 站 ”, 选 择 “ 新 建 "|“ 虚 拟 目 录 " 命 令 , 如 图 2-9 所 示 。 
下 Internet 信息 服务 (CIS) 管 理 器 
巍 文件 四 操作 ”查看 窗口 中 帮助 四 
园 X 罗 加配 国 困 昱 
疤 Internet 信息 服务 | 名称 
擂 SEE 本地 计算 机 ) | 访 mecx 


申 . mney 二 te_app E:\website_asp 


5 全 es 
日 站 Web 服务 # 。 资源 管理 器 E) 


网 站 轩 )…. 
?网 站 未 自 文件 ) G). .- 
» 


从 这 里 创建 窗口 虚拟 路 径 哑 自 文件 ) 四 ) 


图 2-9 设置 虚拟 目录 
(3) 在 弹出 的 “虚拟 目录 创建 向 导 ” 对 话 框 中 输入 网 站 别名 ,如 图 2-10 所 示 。 


虚拟 目录 创建 向 导 
虚拟 目录 别名 
为 虚拟 目录 指定 一 个 类 名 称 或 别名 。 
A Web 虚拟 目录 访问 权限 的 别名 。 使 用 的 命名 规则 应 与 目录 命名 


别 各 的): 
website_ap| 


图 2-10 “虚拟 目录 别名 ”界面 
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(4) 单 击 “ 下 一 步 "按钮 ,在 对 话 框 中 单 击 “ 浏 览 ” 按 钮 ,定位 存放 实际 网 站 的 文件 夹 ,如 
图 2-11 所 示 。 


虚拟 目录 创建 向 导 


网 站 内 容 目 录 
要 发 布 到 网 站 上 的 内 容 的 位 置 。 


输入 包 合 此 网 站 内 容 的 目录 的 路径 。 
路 径 纪 ): 


ET 


图 2-11 设置 “网 站 内 容 目录 ”界面 


(5) 单 击 * 下 一 步 " 按 钮 ,出 现 设置 “虚拟 目录 访问 权限 "界面, 一般 选择 前 两 项 * 读 取 ” 和 
“运行 脚本 (如 ASP)” 即 可 ,如 图 2-12 所 示 。 


虚拟 目录 创建 向 导 
虚拟 目录 访问 权限 
设置 虚拟 目录 的 访问 权限 。 
允许 下 列 权限 ; 
回 读 取 @) 
回 和 返 行 靶 寺 硬 ASPJG) 
口 执行 mo ISAEI 应 用 程序 或 ccTD) 到 ) 
DA 和 AW 
口 浏 览 @ 


单 击 “ 下 一 步 ”按钮 完成 向 导 。 


图 2-12 设置 虚拟 目录 访问 权限 "界面 
(6) 接 下 来 ,依次 单 击 * 下 一 步 " 和 "完成 "按钮 , 即 可 完成 虚拟 目录 的 设置 工作 。 
注意 : 应 用 程序 的 名 称 不 一 定 需要 与 虚拟 目录 别名 相 匹配 。 

知识 4 IIS 备份 和 还 原配 置 数据 


网 络 中 IIS 的 应 用 是 复杂 多 样 的 , 它 的 默认 配置 参数 不 能 满足 每 个 网 站 的 需要 ,因此 ， 
用 户 经 常 需要 自 定义 IS 网 站 配置 。 但 IIS 服务 器 也 有 出 问题 的 时 候 , 很 可 能 导致 这 些 参数 
的 丢失 ,还 要 重新 设置 。 因 此 平时 应 注意 备份 IIS 站 点 配置 参数 ,一 旦 出 现 问题 ,再 进行 还 


人 一- 


原 或 移植 。IIS 备份 和 还 原配 置 的 基本 步骤 如 下 。 
(1) 选择 “开始 ”|* 管 理工 具 ”|*Internet 信息 服务 (IIS) 管 理 器 ”命令 。 
(2) 右 击 计算 机 名 称 , 如 图 2-13 所 示 。 


下 Internet 信息 服务 CIS) 管 理 器 
屡 文件 FE) 操作 他 查看 YW) 窗口 轨 帮助 中 
各 二 自 国 X 芝 四 本 国 困 三 和 是 
鲁 Internet 信息 服务 | 名称 路 径 
后 到 了 :vecmgcx 
申 分 应 用 | 连 措 避 )… 
志 各 网 站 疡 开 四 ) 卫 : website_asp 


日 信 时 浏览 


图 2-13 “备份 /还 原配 置 " 命 令 


(3) 选择 “备份 /还 原配 置 "命令 后 会 弹出 一 个 对 话 框 ,该 对 话 框 允许 备份 IIS 数据 库 , 如 
图 2-14 所 示 。 


版 本 日期/ 时间 | 
| 因 初始 备份 - 由 ITS 安装 程 .… 1 2011-4-29 7:37:42。 交 
| 份 2011-6-10 22:20:58 
| 2011-6-10 22:22:14 
2011-6-10 22:24:02 
2011-6-10 22:25:54 
2011-6-11 9:09:58 
2011-6-11 9:12:56 。 济 


图 2-14 “配置 备份 /还 原 ” 对 话 框 


(4) 单 击 “ 创 建 备份 ”按钮 ,然后 为 此 备份 输入 一 个 名 称 , 如 图 2-15 所 示 。 


(5) 单 击 “ 确 定 ” 按 钮 ,以 使 快 速 备份 数据 库 中 的 管理 设置 。 在 “以 前 的 备份 "列表 框 中 
列 出 备份 名 称 及 其 日 期 和 时 间 。 


(6) 单 击 图 2-14 中 的 “关闭 ”按钮 ,然后 退出 IIS 便 完 成 了 IIS 站 点 配置 参数 的 备份 。 


22 


网 站 建设 与 管理 基础 及 实 训 (ASP 版 ) 2 


图 2-15 创建 IIS 配置 备份 


模拟 制作 任务 


任务 ”编写 一 个 简单 的 ASP 网 页 并 运行 


本 任务 打算 编写 一 个 简单 的 ASP 网 页 ,然后 分 别 将 其 运行 于 主 目录 和 虚拟 目录 ,完成 
任务 的 详细 步骤 如 下 。 

(1) 制作 一 个 简单 的 ASP 网 页 index. asp, 在 网 页 中 输入 如 下 代码 。 

<title>asp 首页 </title> 

<% (OLANGUAGE = "VBSCRIPT" CODEPAGE = "936" %> 

< 

response. Write(" 这 是 一 个 ASP 首页 !< br >") 

response. Write(" 当 前 时 间 是 :"&now()) 

先 > 

(2) 在 主 目录 “系统 盘 :\inetpub\wwwroot” 下 创建 子 目录 “Testsitel”, 将 网 页 index. 
asp 放 人 该 目录 “Testsitel” 下 。 

(3) 在 浏览 器 中 输入 地 址 “http://localhost/Testsitel/index. asp” 后 按 Enter 键 , 即 可 
访问 到 index. asp 网 页 ,如 图 2-16 所 示 。 


习 asp 首 页 - Microsoft Internet Explorer " 
文件 下 ”编辑 E) 查看 WW) 收 总 和 ) I 具 D) 媳 有 ” 局 


@ 夺 -日 四 国人 记 时 


寺 让 癌 科 http://1ocalhost/Testsitel/index. sp 部 加 和 


这 是 一 个 ASP 首 页 ! 
当前 时 间 是 :2011-6-12 21:36:40 


图 2-16 访问 主 目录 下 网 站 Testsitel 下 的 网 页 


(4) 在 其 他 目录 或 盘 符 (如 D、E) 下 新 建 一 个 目录 “Testsite2”, 将 网 页 index. asp 放 入 该 
目录 “Testsite2” 下 。 


0 本 状 由 的 半 5 村 
(5) 参照 知识 点 3 创建 一 个 虚拟 目录 ,其 中 虚拟 目录 的 别名 设置 为 "Testsite”。 
(6) 在 浏览 器 中 输入 地 址 "http://localhost/Testsite/index. asp” 后 按 Enter 键 , 即 可 访 
问 到 index. asp 网 页 ,如 图 2-17 所 示 。 


asp 首 页 - Wicrosoft Internet Explorer 
文件 @) 编辑 下 ) 查看 四 ”收藏 工具 四 大 HWH” 忆 


@ 量 -上 罩 四 加 的 时 


堪 扯 加) 多 http://lecalhost/Testsiteyindex az。 ” 固 3 


这 是 一 个 ASP 首 页 ! 
当前 时 间 是 :2011-6-12 21:31:19 


饮 本 地 Intranet 


图 2-17 访问 虚拟 目录 Testsite 下 的 网 页 


注意 : 从 第 (5) 步 和 第 (6) 步 可 以 看 出 ,应 用 程序 的 名 称 ( 网 站 根 目 录 ) 不 一 定 需 要 与 虚 
拟 目 录 别 名 相 匹 配 , 访 问 虚拟 目录 网 站 时 用 的 是 虚拟 目录 的 别名 。 


知识 点 拓展 


[1] IIS 

IIS 是 Internet Information Service 的 缩写 , 它 是 微软 公司 主推 的 服务 ,最 新 的 版 本 是 
Windows 7 里 面包 含 的 IIS 7. 0 ,最初 是 Windows NT 版 本 的 可 选 包 ,随后 内 置 在 Windows 
2000、Windows XP Professional 和 Windows Server 2003 中 一 起 发 行 ,但 在 普遍 使 用 的 
Windows XP Home 版 本 上 并 没有 IIS。 用 户 能 够 利用 IIS 建立 强大 、 灵 活 而 安全 的 
Internet 和 Intranet 站 点 。 

IIS 支持 HTTP(Hyper Text Transfer Protocol , 超 文本 传输 协议 ) .FTP(File Transfer 
Protocol, 文 件 传输 协议 ) 以 及 SMTP(Simple Mail Transfer Protocol ,简单 邮件 传输 协议 )， 
通过 使 用 CGI 和 ISAPI,IIS 可 以 得 到 高 度 的 扩展 。 

IIS 支持 与 语言 无 关 的 脚本 编写 和 组 件 ,通过 IIS, 开 发 人 员 就 可 以 开发 新 一 代 动 态 的 、 
富有 魅力 的 Web 站 点 。IIS 不 需要 开发 人 员 学 习 新 的 脚本 语言 或 者 编译 应 用 程序 ,JIS 完全 
支持 VBScript、JScript 开发 软件 以 及 Java, 它 也 支持 CGI 和 WinCGI, 以 及 ISAPI 扩 展 和 过 
滤器 。 

JIS 的 一 个 重要 特性 是 支持 ASP。IIS 3. 0 版 本 以 后 引入 了 ASP, 可 以 很 容易 地 张贴 动 
态 内 容 和 开发 基于 Web 的 应 用 程序 。 对 于 使 用 诸如 VBScript、JScript 开发 的 软件 ,或 者 由 
Visual Basic ,Java、Visual C++ 开发 的 系统 ,以 及 由 现 有 的 CGI 和 WinCGI 脚本 开发 的 应 
程序 ,IIS 都 提供 强大 的 本 地 支持 。 

[2] IIS 主 目录 

IIS 主 目录 是 用 来 存放 站 点 文件 的 位 置 ,默认 是 “系统 盘 :\inetpub\wwwroot”, 如 图 2-7 
所 示 。 可 以 把 网 页 做 好 后 直接 放 到 主 目录 下 ,但 通常 不 推荐 这 么 做 ,因为 当 服务 器 上 有 多 个 
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网 站 时 就 会 造成 网 页 文件 管理 的 混乱 。 此 时 可 以 在 默认 目录 下 再 新 建 子 目录 作为 网 站 的 名 
字 , 把 相应 网 页 放 入 该 目录 下 ,这 样 一 个 Web 服务 器 就 可 以 发 布 多 个 网 站 。 

但 随 着 网 站 内 容 的 增多 ,当主 目录 所 在 的 系统 盘 空 间 不 够 时 就 会 对 网 站 的 运行 产生 影 
响 。 这 时 就 需要 新 建 虚拟 目录 ,虚拟 目录 既 可 以 是 本 地 磁盘 中 的 任何 一 个 目录 ,也 可 以 是 网 
络 中 其 他 计算 机 中 的 目录 。 虚 拟 目 录 就 是 将 其 他 目录 以 映射 的 方式 虚拟 到 该 Web 服务 器 
的 主 目录 下 ,这样 一 个 Web 服务 器 的 主 目录 实质 上 就 可 以 包括 很 多 不 同 盘 符 \ 不 同 路 径 的 
目录 ,而 不 会 受到 所 在 盘 空 间 的 限制 了 。 当 用 户 登 录 到 主 目录 下 ,还 可 以 根据 该 账户 的 权限 
对 它 进行 相应 的 操作 ,就 像 操 作 主 目录 下 的 子 目录 一 样 。 

主 目录 设置 的 权限 如 果 与 虚拟 目录 的 权限 发 生 冲 突 , 则 以 主 目录 权限 为 准 。 比 如 主 目 
录 设 置 的 权限 为 读 取 和 写 和 人 ,而 虚拟 目录 的 权限 只 设置 为 读 取 , 则 其 权限 将 会 被 主 目录 权限 
覆盖 掉 , 自 动 拥 有 写 人 权限 。 

建立 虚拟 目录 对 于 管理 Web 站 点 具有 非常 重要 的 意义 。 

首先 ,虚拟 目录 隐藏 了 有 关 站 点 目录 结构 的 重要 信息 。 因 为 在 浏览 器 中 ,客户 通过 选择 
“查看 源 代码 "命令 ,很 容易 就 能 获取 页 面 的 文件 路 径 信 息 , 如 果 在 Web 页 中 使 用 物理 路 径 ， 
将 暴露 有 关 站 点 目录 的 重要 信息 ,这 容易 导致 系统 受到 攻击 。 

其 次 ,只 要 两 台 机 器 具有 相同 的 虚拟 目录 ,就 可 以 在 不 对 页 面 代 码 做 任何 改动 的 情况 
下 ,将 Web 页 面 从 一 台 机 器 上 移 到 另 一 台 机 器 。 另 外 , 当 将 Web 页 面 放置 于 虚拟 目录 下 
后 ,可 以 对 目录 设置 不 同 的 属性 ,如 : Read、Excute Script。 读 访问 表示 将 目录 内 容 从 IIS 
传递 到 浏览 器 。 而 执行 访问 则 可 以 使 在 该 目录 内 执行 可 执行 的 文件 。 当 需要 使 用 ASP 时 ， 
就 必须 将 存放 . asp 文件 的 目录 设置 为 "Excute( 执 行 )”。 

建议 在 设置 Web 站 点 时 ,将 HTML 文件 同 ASP 文件 分 开放 置 在 不 同 的 目录 下 ,然后 
将 HTML 子 目录 设置 为 " 读 ”, 将 ASP 子 目录 设置 为 “执行 ”, 这 不 仅 方便 了 对 Web 的 管理 ， 
而 且 最 重要 的 是 提高 了 ASP 程序 的 安全 性 ,防止 了 程序 内 容 被 用 户 访问 。 


职业 技能 知识 点 考核 


1. 填空 题 

(1) IIS 支持 的 协议 有 和 等 。 
(2) Windows 7 里 面 IIS 的 版 本 为 

(3) IIS 的 主 目录 默认 为 _。 

2. 简 答 题 


(1) 简 述 IIS 及 其 功能 。 
(2) 简 述 利用 IIS 的 主 目录 和 虚拟 目录 发 布 网 站 的 优 缺 点 。 


网 页 设计 工具 
Dreamweaver CS5 


本 模块 主要 介绍 网 页 设计 工具 Dreamweaver CS5 的 使 用 ,让 学 生 熟 悉 利 用 
Dreamweaver CS5 进行 站 点 设置 和 网 页 设计 ,掌握 网 页 制作 的 一 些 基本 操作 ,如 插入 表格 、 
图 像 .视频 和 Flash 动画 等 网 页 元 素 , 同 时 了 解 HTML 的 常用 标签 。 

能 力 目标 

1. 规划 和 设置 Dreamweaver 站 点 

2. 常用 网 页 元 素 的 插入 和 编辑 

3. 表单 的 制作 

知识 目标 

1. 常用 HTML 标签 语法 

2. HTML 标签 的 属性 设置 


知识 储备 


知识 Dreamweaver CS5 的 工作 环境 


启动 Dreamweaver 后 , 单 击 “ 新 建 " 项 目下 的 HTML, 即 可 进入 Dreamweaver 的 工作 界 
面 。Dreamweaver 的 工作 窗口 主要 由 应 用 程序 栏 .插入 栏 、 文 档 工具 栏 ,文档 窗口 、 面 板 组 、 
属性 检查 器 和 标签 选择 器 等 部 分 组 成 ,如 图 3-1 所 示 。 

1. 应 用 程序 栏 

应 用 程序 窗口 顶部 包含 一 个 工作 区 切换 器 .菜单 栏 (主要 包括 “文件 "“ 编 辑 "“ 查 看 ”、 
“插入 ”“ 修 改 ”“ 格 式 ”“ 命 令 ”“ 站 点 ”“ 窗 口 * “帮助” 等 菜单 ) 以 及 其 他 应 用 程序 控件 。 
单 击 菜单 栏 中 的 命令 ,在 弹出 的 下 拉 菜 单 中 选择 要 执行 的 命令 。 

2. 插入 栏 

包含 用 于 将 各 种 类 型 的 对象 (如 图 像 表 格 和 层 ) 插 入 到 文档 中 的 按钮 。 每 个 对 象 都 
是 一 段 HTMLDC 代码, 使 用 户 在 插入 时 可 设置 不 同 的 属性 。 例 如 ,可 以 在 “插入 ” 栏 中 单 击 
“图 像 ” 按 钮 插入 图 像 。 也 可 以 不 使 用 “插入 ”* 栏 而 使 用 菜单 “插入 ”|“ 图 像 ” 命 令 插入 图 像 。 

3. 文档 工具 栏 

文档 工具 栏 包含 一 些 按钮 .它们 提供 在 各 种 “文档 ”窗口 视图 (如 “设计 ”视图 “ 拆 分 " 视 
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应 用 程序 栏 ”插入 栏 文档 工具 栏 ”文档 窗口 工作 区 切换 


人 1NEUwabs 


HD aterll 
HD stelz 
SD atel3 
由 加 wt 
国 dle es im 
[WY A 00 59 # 18> 1 K /1 vaieode me 
v Bl 泣 注 给 娃 标 是 ID) 
[村 王 G) 无 ~ | 全 搜 Q) Y9 口 ”时 四 
[as  ) < 
WE LE 
标签 选择 器 属性 面板 文件 面板 


图 3-1 _ Dreamweaver CS5 工作 界面 


图 和 “代码 "视图 ) 间 快速 切换 的 选项 、 各 种 查看 选项 和 一 些 常 用 操作 (如 “在 浏览 器 中 预览 / 
调试 "“ 文 件 管理 ”“ 验 证 标记 ”“ 检 查 浏 览 器 兼容 性 ”等 ) 。 

用 户 可 以 在 “标题 " 右 侧 的 文本 框 中 输入 一 个 标题 , 它 会 显示 在 浏览 器 的 标题 栏 中 。 单 
击 “ 在 浏览 器 中 预览 /调试 "按钮 ,在 弹出 式 菜 单 中 选择 一 个 浏览 器 ,可 以 预览 网 页 显示 效果 ， 
键盘 快捷 键 是 F12。 

注意 : 单 击 “查看 ”|“ 工 具 栏 "|" 文档 ”命令 菜单 ,就 会 在 Dreamweaver CS5 中 显示 文档 
工具 栏 。 若 去 掉 “ 文 档 ” 选 项 前 的 对 名 ,就 可 以 隐藏 文档 工具 栏 。 

4. 文档 窗口 

文档 窗口 用 于 显示 当前 正在 创建 和 编辑 的 文档 。 将 鼠标 在 文档 中 单 击 , 即 可 开始 在 光 
标 位 置 输入 网 页 元 素 并 进行 编辑 了 。 

5. 面板 组 

面板 组 是 分 组 在 某 个 标题 下 面 的 相关 面板 的 集合 ,用 来 帮助 用 户 监控 和 修改 工作 。 主 
要 包括 “插入 ”面板 “行为 ”面板 “CSS 样式 ”面板 和 “文件 ”面板 等 。 用 户 可 以 根据 自己 的 
需要 ,选择 隐藏 和 显示 面板 。 若 要 展开 某 个 面板 ,可 双击 其 选项 卡 。 

6. 属性 面板 

属性 检查 器 用 于 查看 和 更 改 所 选 对 象 或 文本 的 各 种 属性 。 属 性 面板 会 随 着 选择 对 象 的 
不 同 而 有 所 不 同 。 单 击 属性 面板 右 下 角 的 三 角 箭头 可 以 折 生 /展开 属性 面板 。 单 击 “ 属 性 ” 
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面板 右上 角 的 下 拉 菜 单 选择 “关闭 ?或 “关闭 面板 组 ”命令 可 以 关闭 属性 面板 。 如 果 要 重新 打 
开 , 可 以 单 击 “窗口 ?|* 属 性 命令。 

7. 标签 选择 器 

标签 选择 器 位 于 ”文档 ”窗口 底部 的 状态 栏 中 。 显 示 环 绕 当 前 选 定 内 容 的 标签 的 层次 结 
构 。 单 击 该 层次 结构 中 的 任何 标签 可 以 选择 该 标签 及 其 全 部 内 容 。 

8. 文件 面板 

文件 面板 类 似 于 Windows 资源 管理 器 ,用 于 管理 文件 和 文件 夹 ,无 论 它 们 是 
Dreamweaver 站 点 的 一 部 分 还 是 位 于 远程 服务 器 上 。 用 户 还 可 以 通过 “文件 ”面板 访问 本 
地 磁盘 上 的 全 部 文件 。 


模拟 制作 任务 


任务 1 规划 和 设置 Dreamweaver 站 点 

在 Dreamweaver CS5 中 搭建 ASP 动态 网 站 的 详细 步骤 如 下 。 

(1) 单 击 菜单 “站 点 ”1“ 新 建站 点 ”命令 ,弹出 如 图 3-2 所 示 对 话 框 。 在 对 话 框 中 设置 
“站 点 名 称 ” 和 “本 地 站 点 文件 夹 "。 如 果 在 本 地 运行 的 是 静态 网 站 , 则 只 需 做 这 一 步 设 置 即 
可 。 如 果 在 本 地 运行 的 是 ASP 动态 网 站 , 则 还 需要 设置 服务 器 信息 。 


站 点 设置 对 象 website_asp 


Dreamweaver 站 点 是 网 站 中 使 用 的 所 有 文件 和 资源 的 集合 。 Dreamweaver 
站 点 通常 包含 两 个 部 分 : 可 在 其 中 存储 和 处 理 文件 的 计算 机 上 的 本 地 文件 
夹 ， 以 及 可 在 其 中 将 相同 文件 发 布 到 Web 上 的 服务 器 上 的 远程 文件 夫 。 


您 可 以 在 此 处 为 Dreamweaver 站 点 选择 本 地 文件 夹 和 名 称 。 
站 点 名 称 : | website_asp 
本 地 站 点 文件 夹 ; [E: Wwebsite_asp\ 


图 3-2 设置 站 点 本 地 文件 夹 和 名 称 


(2) 单 击 图 3-2 中 左 侧 的 “服务 器 "选项 ,弹出 如 图 3-3 所 示 的 对 话 框 。 

(3) 单 击 图 3-3 下 方 的 “十 "按钮 ,在 弹出 如 图 3-4 所 示 的 对 话 框 中 设置 动态 网 站 的 基本 
信息 。 此 处 Web URL 中 的 “website_app” 是 在 IIS 服务 器 中 为 网 站 所 在 目录 (“E:\website_ 
asp”) 设 置 的 虚拟 目录 别名 。 

(4) 单 击 图 3-4 中 的 “高 级 ”, 可 以 设置 动态 网 站 的 高 级 信息 ,如 图 3-5 所 示 。 
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图 3-5 设置 动态 网 站 的 高 级 信息 
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(5) 在 图 3-5 中 的 “测试 服务 器 ”区 块 中 “服务 器 模型 "选择 ASP VBScript。 单 击 “ 保 存 ” 
按钮 即 可 返回 图 3-3。 由 于 开发 动态 网 站 通常 是 在 本 机 制作 完 后 再 上 传 到 服务 器 上 ,所 以 
需要 勾 选 图 3-3“ 测 试 " 下 方 的 复 选 框 将 本 机 作为 测试 服务 器 。 
(6) 单 击 图 3-3 中 的 “保存 ”按钮 即 完成 了 一 个 简单 ASP 动态 网 站 的 设置 。“ 版 本 控制 
和 * 高 级 设置 ?项 用 户 可 以 根据 自己 的 需要 设置 ,在 此 不 做 袭 述 。 


任务 2 插入 和 编辑 表格 


表格 通常 用 于 网 页 布局 ,因此 熟悉 表格 的 相关 操作 是 十 分 必要 的 。 在 网 页 中 插入 和 编 
辑 表格 的 步骤 如 下 。 

(1) 选择 菜单 “窗口 "1“ 插 入 "命令 ,打开 “插入 " 栏 ,在 “插入 " 栏 中 单 击 " 表 格 " 按 钮 ,或 直 
接 选 择 菜 单 “ 插 入 ”|“ 表 格 " 命 令 , 弹 出 如 图 3-6 所 示 的 对 话 框 。 在 该 对 话 框 中 可 以 设置 表格 
的 行 数列 数 、 表 格 宽度 和 边框 粗细 等 参数 。 

(2) 单 击 “ 确 定 ” 按 钮 即 可 在 网 页 中 插入 一 个 宽度 为 200 像素 的 表格 ,如 图 3-7 所 示 。 


表格 宽度 , [200 | | 像 过 
边框 粗细: |1 | 僧 案 
图 


田 


200~ 


图 3-6 “表格 ”对话 框 图 3-7 插入 网 页 中 的 表格 


(3) 图 3-7 中 的 表格 已 经 被 选中 ,此 时 可 以 在 属性 面板 中 设置 表格 的 属性 ,如 图 3-8 所 示 。 


国 | 表格 后 BiE | 宽 @zoo | | 荐 冯 回 | ”对 齐 | 黑人 ”vj 类 加 | 无 v| 
BE 间距 加 | 边框 名 [1 


图 3-8 表格 的 属性 面板 


(4) 当然 也 可 以 选择 表格 的 行 、 列 或 单元 格 进行 属性 设置 。 如 图 3-9 所 示 即 为 选择 表 
格 行 后 的 属性 面板 。 

(5) 其 他 属性 的 设置 大 体 相似 ,在 此 不 做 次 述 ,插入 的 表格 在 浏览 器 中 的 浏览 效果 如 
图 3-10 所 示 。 
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| E J 
Es 加 天 ”和 下 四 黑人 ”~ 高 四 | ”| 标题 如 口 


下 疾 入 表格 - Windows Internet Erplorer 
文件 下 ) ”编辑 下 ) 查看 外 收 疗 由 ) 工具 CD) 帮助 00 


-日 国 国 的 时 闪 Wx @ 从- 


地 直 癌 ) 阐 http://1ocahost/website_app/chspter03/insertTable.htal ~ 加 对 到 


鲍 本 地 Intranet 


图 3-10 在 浏览 器 中 浏览 表格 


任务 3 插入 图 像 


图 像 是 网 页 中 的 常用 元 素 , 在 网 页 中 插入 图 像 和 设置 图 像 属性 的 步骤 如 下 。 

(1) 选择 菜单 “窗口 ”1“ 插 入 ”命令 ,打开 “插入 ” 栏 ,在 “插入 ” 栏 中 单 击 “ 图 像 按 钮 ,或 直 
接 选 择 菜单 “插入 ”| “图像 ”命令 ,在 弹出 的 “选择 图 像 源 文件 ”对 话 框 中 选择 要 择 入 的 图 像 
后 , 单 击 “ 确 定 ” 按 钮 即 可 插入 图 像 。 

(2) 选中 网 页 中 的 图 像 , 在 属性 面板 中 可 以 修改 其 相应 的 属性 ,如 图 3-11 所 示 。 


图 像 ，126K 。 宽 外) 400 源 文件 人) dog jpe_ DED de Y| 类 @) | 元 
车 | 高 由 300 链接 QD MM FP 
地 图 如 | 重 直 中 | | 。 月 标 @) 边框 10 | 过 台 O A 
全 剖 嫌 局 水平 这 中 四 | 原始 例 忆 对 开 旭 默 久 信 ~ 


图 3-11 图 像 属性 面板 


(3) 在 图 3-11 中 可 以 设置 图 像 的 人 D、 宽 、 高 和 边框 等 属性 。 如 图 3-12 所 示 即 为 设置 图 
像 边 框 为 10 的 浏览 效果 。 


任务 4 插入 音频 和 视频 


在 文档 窗口 中 插入 音频 和 视频 文件 的 具体 步骤 如 下 。 

(1) 将 插入 点 定位 到 要 嵌入 音 视频 文件 的 位 置 ,然后 在 “插入 ”工具 栏 的 “常用 ”选项 卡 
中 单 击 * 媒 体 " 图 标 ,选择 “插件 命令。 或 者 选择 菜单 "插入 "| 媒体 "| “插件 "命令 。 在 弹出 
的 “选择 文件 "对话 框 中 选择 要 财 入 的 音 视 频 文件 (注意 : 文件 名 必须 用 英文 ,不 能 用 汉字 ) 。 

(2) 选中 插入 的 音 视 频 文件 ,通过 在 属性 面板 的 “ 宽 " 和 “高 "文本 框 中 输入 数值 或 在 “ 设 
计 ” 视 图 中 拖 跨 插件 控制 点 来 调整 插件 大 小 ,最 终 确 定 播放 器 控件 在 浏览 器 中 的 显示 大 小 ， 
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如 图 3-13 所 示 。 


于 括 入 图 重 - Yindows Internet Erplorer 
文件 编辑 下 ) 查看 WW) 收藏 内 工具 和 帮 助 0 


Os © BB Pur umn © 6 


境 泪 问 痢 http://1ocalhost/website_app/chapter03/insertIng. htnl | 回转 到 


局 本 地 Intranet 


图 3-12 在 浏览 器 中 浏览 图 像 


Dw | ga，| 区 ] Of sw 回扣 区 滞 
文件 也 往 辑 到 ) 可 看 (WD 插入 (D 修改 咖 格式 (0) 命令 (DD 站 点 (人 留 口 QD 帮助 人 D | 
E23 
屿 品 怠 诺 | 国 目 国 -很 - 间 同上 内 办- 信 ， 着- 加 
insertVideo. htal Xx 
| 代码 | 折 分 [设计 | 实时 代码 后 光 。 实时 视图 ”检查 疙 , 了 .局 
I ET apter03/insertyideo htal 
回 vebsite_asp 本 地 视图 立 
名 C3 人 站 色 名 | 加 
六 
OD chapter03 
aog jpe 126IB ， 
了 全 二 inaex htnl 1 
二 醒 insertme 1 
十 insertTab 1 
二 insertvia im 
图 phei. ari 1 
图 tesery mm 49. 
图 tiaosan npe 4651B 1 
图 xingtaemv 16. 
田 - 回 shapter04 
加 ”chapter05 
[WI fox -59x306v1399K730 秒 icole (UTF-6) 田 回 =hepteroe 
田 - 鲍 ”chapteror 
2 臣 插件 病名 250 | 源 文 件 G)jphei avi 局 对 亨 内 默 以 值 em chapter08 
0 高 插件 RLE) 3 二 二 田 - 回 chapter09 
OE 己 时 加 ”chapterl0 和 
重 直 j 想 o) 边框 色 ) i 站 
Ee 本 EE 


图 3-13 插入 音 视频 插件 
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件 使 


(3) 将 音 视 频 文 件 插 入 到 指定 位 置 后 .可 以 利用 属性 面板 设置 音 视 频 文 件 的 
的 HTML 标签 为 embed> 。 
提示 : 插件 默认 使 用 的 是 Windows Media Player 播放 器 ,IE 在 加 载 页 面 时 会 


属性 。 插 


自动 加 载 


Windows Media Player 的 控制 面板 。 不 同 的 浏览 器 根据 访问 者 安装 的 播放 器 插件 不 同 ,可 


能 显 


数 。 


示 的 播放 器 的 界面 有 所 不 同 。 


插件 插入 之 后 ,如 果 需 要 对 音 视频 文件 的 播放 进行 更 多 的 控制 ,还 需要 修改 相应 的 参 


方法 是 单 击 属性 面板 中 的 “参数 ”按钮 ,弹出 “参数 "对话 框 ,常用 的 参数 如 下 。 
autostart: 是 否 在 页 面 加 载 时 自动 开始 播放 , 取 值 为 true 或 者 false。 


loop: 重复 播放 , 值 为 true 则 自动 重复 播放 ,false 不 重复 播放 , 取 值 为 n 则 重复 播放 


n 次 。 
controls: 播放 器 控制 面板 设置 , 取 值 为 一 串 以 英文 逗号 间隔 的 字符 串 , 用 于 指定 播放 
器 控制 的 可 见 性 。 


参数 设置 如 图 3-14 所 示 。 


autostart 


loop 


图 3-14 音 视频 播放 参数 设置 


(4) 在 浏览 器 中 播放 插入 的 视频 ,效果 如 图 3-15 所 示 。 
避 新 入 视频 文件 - Windows Internet Erplorer 
文件 @) 编辑 EE) 查看 W) 收 宰 人 ) 工具 CT) 必 助 Q) 
< 四国 的 万 潍 南 yx 加 内 
地 址 四 图 http://1localhostfwebsite_app/chapter03/insertyideo ht 加 9 到 


(DONOOOO 


BED 晤 本 地 Intranet 


图 3-15 播放 插入 的 视频 效果 
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任务 5 插入 FLV 格式 视频 


在 文档 窗口 中 插入 FLV 中 格式 视频 的 步骤 如 下 。 

(1) 将 插入 点 定位 到 要 嵌入 音 视频 文件 的 位 置 , 然 后 在 “插入 ”工具 栏 的 “常用 ”选项 卡 
中 单 击 “ 媒 体 " 图 标 , 选 择 FLV 命令 。 或 者 选择 菜单 “插入 ”|“ 媒 体 ”|FLV… 命 令 。 在 弹出 
的 “插入 FLV” 对 话 框 中 选择 要 插入 的 FLV 视频 文件 ,在 对 话 框 中 为 要 插入 的 视频 设置 相 
应 的 参数 ,如 图 3-16 所 示 。 


:| 累进 式 下 载 视频 


;WBABasketball. 日 v 
(输入 FLY 文件 的 相对 或 绝对 路 径 》 


: |Clear skin 1 (最 小 宽度 ; 140) 


= 1 mW 只 


: 540 | 回 限制 高 宽 比 
: 460 | 包括 外 观 : 640x480 
器 自动 播放 


器 自动 重 新 揪 风 


要 观看 视频 ,请 在 浏览 器 中 预览 页 面 。 


图 3-16 “插入 FLV” 对 话 框 


(2) 单 击 “确定 ”按钮 即 可 插入 FLYV 视频 , 当 保 存 网 页 时 会 弹出 如 图 3-17 所 示 对 话 框 。 
提示 网 站 开发 人 员 在 发 布 网 站 时 应 该 把 FLV 视频 播放 的 支持 文件 一 起 发 布 。 


此 人 的 六 品位 举人 基 于 科 人 各 看 站 全 已 过 币 到 本 由 襄 要 使 相应 的 对 象 或 行为 


Seripts/expressInstall. swf 
Seripts/swfobject_modified js 


图 3-17 复制 FLV 视频 支持 文件 


(3) 在 浏览 器 中 预览 ,FLYV 视频 的 播放 效果 如 图 3-18 所 示 。 
任务 6 插入 Flash 动画 
在 文档 窗口 中 插入 Flash 文件 的 步 又 如 下 。 
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CY 


室 


中 
SS ee | $s] tive search [1- 
文件 {E) ”编辑 (E) ”查看 ( 凡 。 收 疗 夹 ( 扩 。 工具 (D) 帮助 由) 

x 号- 


这 收藏 天 。 乱 插 入 音 视频 


WSH EE ORLEE 121 EE 


[完成 EE [~-[Rl00% - 


图 3-18 FLYV 视频 格式 播放 效果 


将 插入 点 定位 到 要 插入 Flash 动画 的 位 置 , 然 后 在 “插入 "工具 栏 的 “常用 ”选项 卡 


中 单 击 “媒体 ”图标 ,选择 SWF 命令 。 或 者 选择 菜单 “插入 "| “媒体 ”|SWF 命令 。 在 弹出 的 
“选择 文件 "对 话 框 中 选择 要 插入 的 SWF 文件 , 单 击 “ 确 定 ” 按 钮 即 可 将 Flash 动画 插入 到 网 


页 中 。F 


lash 动画 不 会 在 Dreamweaver 文档 窗口 中 显示 具体 动画 内 容 , 而 是 以 一 个 带 有 字 


母 F 的 灰色 框 来 表示 ,如 图 3-19 所 示 。 


fobjeet_nodified js 
| 代码 | 拆 分 | 次 于 ] Hf 后。 实时 视图。 葵 查 ， 瞧 . 吵 、 避 标题- 半 和 nw 
[Wk tor0 1 


Dw | sn » | Ba] O cue SEE 
文件 人 )” 凡 昼 () 查看 () 插入 (2) 修 滩 (D 格式 () 命令 (C) 站 点 ()” 写 口 OD 帮助 人 0 

第 局 下 间 | 数据 【5pzy scontezt 344ting 文 汪 么 沫 大 

六 口吻 锯 | 轩 回国 - 安 - 彰 辣 及 回忆 - i 

insertPlash htal x ste np emapter Os insertFiach nial 


[了 


国 . 


ER 

CLHYIDlE 

SD WE- i 
© deaol 


© ht 
Ea= chapter0s 


币 hener mf oom 
外 es 4 
dog jpE 12619 
让 外 mv om 
二 inaechml tm 
于 insertma 2 
乌 3 
二 1 
二 1 
二 insertyid 1 
WI 10% ~ 6r9 x 3 WME/2D Unicode WF-B) we phpacket 17 
可 numi 1 
图 toy mv 4 
图 isosm wpe sm 
xingfa mw 。 16 ，' 
CE | . 
回 和 拓 故 QD 水 平 边 拭 中) 比 硬 加 区 人 于 序 训 未 ) >| 向 5 王 友 | 未 韦 明 。 v [ 参 娄 


图 3-19 设计 状态 下 插入 网 页 中 的 Flash 动画 
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(2) 在 图 3-19 下 方 的 属性 面板 中 可 以 设置 当前 选中 的 Flash 动画 的 参数 ,其 中 需要 特 

别 注意 Wmode 参数 的 运用 ,有 时 为 了 显示 网 页 的 背景 颜色 和 背景 图 像 , 需 要 设置 Flash 动 

画 的 Wmode 参数 值 为 “透明 ”。 如 图 3-20 和 图 3-21 所 示 即 为 设置 Wmode 参数 值 为 “透明 ” 

前 后 的 效果 区 别 。 


翌 疾 入 Flash 动画 - Yindews Internet Explorer 
文件 全 编辑 EE) 查看 W]) 收 疗 由 ) 工具 中 帮助 0 


@i 日 国 国 的 Pe 次 Wax @ 全 -对 国 


地 福生 http://1ocalhost/website_app/ chapter03/insertFlash htnl 


号 本 地 Intranet 


图 3-20 背景 透明 前 的 Flash 动画 


忆 插入 Pash 动 画 - Yindows Internet Explorer 
文件 人 E) 编辑 EE) 查看 Q) 收 亭 &) 工具 帮助 0 


[€) 后 iE 


全 本 昌 Intranet 


图 3-21 背景 透明 后 的 Flash 动画 


任务 7 制作 超 链 接 


在 Dreamweaver 中 创建 文字 超 链接 的 方法 很 简单 ,就 是 先 选 中 要 创建 链接 的 文字 或 图 
像 ,然后 为 其 指定 被 链接 文档 的 访问 路 径 , 即 URL。 被 链接 文档 可 以 是 网 址 、 网 页 、 各 类 文 
档 和 压缩 文档 等 。 

选中 文字 后 ,给 链接 文字 指定 被 链接 文档 访问 路 径 的 方法 有 以 下 4 种 。 

(1) 在 属性 面板 上 的 “链接 "文本 框 中 手工 输入 被 链接 文档 的 路 径 。 

(2) 先 用 鼠标 左 键 按 住 属性 面板 上 “链接 "文本 框 后 的 “指向 文件 ”按钮 ,然后 移动 鼠标 
到 文件 面板 中 要 链接 的 对 象 上 即 可 。 

(3) 单 击 属性 面板 上 “链接 ”文本 框 后 面 的 “浏览 文件 "按钮 ,在 弹出 的 “打开 文件 ”对 话 
框 中 选择 要 链接 的 对 象 。 

(4) 单 击 “ 插 入 ”菜单 下 的 “超级 链接 ”命令 ,弹出 如 图 3-22 所 示 的 “超级 链接 ”对 话 框 。 
按 要 求 设置 好 后 , 单 击 “确定 ”按钮 即 可 在 网 页 中 插入 超 链 接 。 
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文本 : 新 浪 


链接 : |http://wrw. sina. com. cn 


图 3-22 “超级 链接 "对 话 框 


提示 : 创建 超 链 接 时 ,属性 面板 和 “超级 链接 ”对话 框 中 的 “目标 "文本 框 用 来 设置 超 链 
接 的 打开 方式 。 其 下 拉 列 表 中 包含 4 个 选项 ,其 含义 如 下 。 

_blank: 将 被 链接 对 象 载 入 到 新 的 浏览 器 窗口 中 。 

_parent: 将 被 链接 对 象 载 入 到 父 框 架 集 或 包含 该 链接 的 框架 窗口 中 。 

_self; 将 被 链接 对 象 载 入 到 与 该 链接 相同 的 框架 或 窗口 中 (本 选项 也 是 默认 打开 方式 ) 。 

_top: 将 被 链接 对 象 载 入 到 整个 浏览 器 窗口 并 取消 所 有 框架 。 


任务 8 制作 表单 


表单 是 网 站 中 收集 信息 的 主要 途径 ,只 要 是 动态 网 站 ,基本 上 都 会 用 到 表单 。 下 面 以 一 
个 用 户 注册 表单 为 例 简单 讲述 表单 的 制作 ,制作 表单 的 大 致 步骤 如 下 。 

(1) 切换 “插入 ”工具 栏 到 “表单 ”选项 卡 ,该 选项 卡 下 列 出 了 制作 表单 的 所 有 表单 元 素 。 
如 图 3-23 所 示 , 当 把 鼠标 放 到 “表单 工具 栏 上 具体 的 表单 元 素 时 ,会 提示 相应 的 表单 元 素 
名 称 。 

. 仿 必 | 布局 | 去 平 | 数据 |Spry | InContext Editing |X | 必 和 交 | 

加 | 品名 团 | 对 四 回 目 | 国 因 | 回国 Ol 名品 BM 日 


图 3-23 “表单 "工具 栏 
(2) 单 击 “ 表 单 " 按 钮 (第 一 个 表单 元 素 ) 往 网 页 中 插入 一 个 表单 ,表单 在 设计 状态 下 显 


示 为 红色 虚线 框 ,如 图 3-24 所 示 。 在 浏览 器 中 浏览 表单 时 ,表示 表单 的 红色 虚线 框 是 不 会 
显示 的 。 


图 3-24 设计 状态 下 的 表单 


(3) 接 下 来 需要 往 表单 中 添加 相应 的 表单 元 素 ,通常 可 以 在 表单 中 插入 表格 来 布局 表 
单元 素 。 捅 入 一 个 10 行 两 列 的 400 像素 宽 的 表格 ,合并 表格 的 第 1 行 和 第 10 行 的 两 个 单 
元 格 ,并 设置 这 两 行 居中 对 齐 。 插 入 完 表 格 后 的 表单 如 图 3-25 所 示 。 

(4) 往 表格 中 添加 相应 的 表单 元 素 后 的 表单 如 图 3-26 所 示 。 

(5) 在 “标签 选择 器 "中 选择 一 form# forml> 标 签 , 然 后 就 可 以 在 属性 面板 中 设置 表单 
属性 ,如 图 3-27 所 示 。 


人 
& 03 模 块 。 网 页 设计 工具 一 Dreamweaver CS5 37 /x 


~ 


3-25 插入 表格 后 的 表单 


其 它 说 明 ， 


图 3-26 ”添加 表单 元 素 后 的 表单 


00% ~ TIT x 418v 3KK/1 黎 Unicode (UTF-8) 


动作 [fornhetion sp 
方法 |Posr ~ 


] 电 上 村 Daf wv| 类 @| 无 可 
护 友 区 型 9 


图 3-27 设置 表单 属性 


(6) 至 此 ,一 个 完整 的 表单 设计 完成 ,如 果 需 要 对 表单 数据 进行 相应 处 理 , 只 需 制作 好 
表单 处 理 页 面 (如 formAction. asp) 即 可 。 


知识 点 拓展 


[1] HTML 中 的 常用 标签 如 下 。 

(1) 二 html 二 标签 

文档 标识 符 , 它 是 成 对 出 现 的 。 首 标签 二 html 二 和 尾 标签 二 /html 二 分 别 位 于 文档 的 最 
前 面 和 最 后 面 , 明 确 地 表示 文档 是 以 超 文本 标识 语言 (HTML) 编 写 的 。 

(2) 一 head 盖 标签 

习惯 上 人 们 把 HTML 文档 分 为 文档 头 和 文档 主体 两 个 部 分 。 文 档 的 主体 部 分 就 是 人 
们 在 浏览 器 用 户 区 中 看 到 的 内 容 ; 而 文档 头 部 分 用 来 规定 该 文档 的 标题 (出 现在 浏览 器 窗 


38 


网 站 建设 与 管理 基础 及 实 训 (ASP 版 ) 


写 


口 的 标题 栏 中 ) 和 文档 的 其 他 一 些 属性 。 

(3) 二 title 二 标签 

<title 之 标签 是 成 对 的 。 用 来 规定 HTML 文档 的 标题 。 在 二 title 之 和 去 /title 之 之 间 
的 内 容 将 显示 在 Web 浏览 器 窗口 的 标题 栏 中 。 

(4) <<body 二 标签 

二 body 二 标签 也 是 成 对 标签 。 在 二 body 二 一 /body 二 之 间 的 内 容 将 显示 在 浏览 器 窗口 
的 用 户 区 内 , 它 是 HTML 文档 的 主体 部 分 。 在 一 body 二 标签 中 可 以 规定 整个 文档 的 一 些 
基本 属性 ,如 背景 颜色 .背景 图 片 .字体 和 字号 等 。 

(5) 标题 标签 

一 般 文 章 都 有 标题 .副标题 . 章 和 节 等 结构 ,HTML 中 也 提供 了 相应 的 标题 标签 二 hn 二 ， 
其 中 为 标题 的 等 级 ,HTML 总 共 提 供 6 个 等 级 的 标题 ,n 越 小 ,标题 字号 就 越 大 ,二 hl 二 
定义 最 大 号 标题 , 王 h6 二 定义 最 小 号 标题 。 

(6) 换行 标签 二 br 二 

换行 符号 标签 是 个 单 标 签 , 也 叫 空 标签 ,不 包含 任何 内 容 , 在 HTML 文件 中 的 任何 位 
置 只 要 使 用 了 二 br> 标 签 , 当 文件 显示 在 浏览 器 中 时 ,该 标签 之 后 的 内 容 将 在 下 一 行 显 示 。 
二 br 二 标签 用 于 定义 文本 从 新 的 一 行 显示 , 它 不 产生 一 个 空 行 ,但 连续 多 个 的 二 br 二 标签 可 
以 产生 多 个 空 行 的 效果 。 

(7) 水 平 线 标签 二 hr 二 

用 二 hr 二 标签 可 以 在 网 页 上 面 出 一 条 横 跨 网 页 的 水 平分 隔 线 ,以 分 隔 不 同 的 文字 段落 。 
一 hr 二 标签 有 size .width 和 color 等 属性 。 

(8) 字体 标签 二 font 二 

font 标签 是 HTML 里 最 常用 的 文字 格式 控制 标签 ,通过 改变 font 标签 的 属性 可 以 改 
变 文字 的 大 小 .颜色 .字体 等 。font 标签 的 主要 属性 如 下 。 

font 标签 的 size 属性 指定 文字 的 大 小 , 它 的 取 值 范围 是 1 一 7, 当 它 取 值 为 "1 时 文字 最 
小 , 取 值 为 "7 时 文字 最 大 ,默认 值 是 "3”。 

font 标签 的 color 属性 可 以 指定 文字 的 颜色 , 它 的 取 值 有 英文 关键 字 .十 六 进 制 颜色 代 
码 rgb 函数 三 种 类 型 。 

font 标签 的 face 属性 指定 文字 的 字体 。 

如 代码 “二 font size 王 "5" face 王 "宋体 ”color= "red" 二 登 琢 涛 楼 一 /font 二 ”设置 了 文 
字 " 登 蕉 省 楼 ”的 字体 为 "宋体 ”, 字 号 为 "5”, 颜 色 为 "红色 ”。 

(9) 段落 标签 二 p> 

二 p 二 标签 符 用 于 划分 段落 ,控制 文本 位 置 。 二 p 二 是 成 对 标签 ,用 于 定义 内 容 从 新 的 
一 行 开始 ,并 与 上 段 之 间 有 一 个 空 行 ,其 align 属性 定义 新 开始 的 一 行内 容 在 页 面 中 的 对 齐 
位 置 ,属性 值 可 以 是 left( 左 对 齐 ) .center( 居 中 对 齐 ) 或 者 right( 右 对 齐 )。 

(10) 图 片 标签 <img 二 

img 是 图 像 的 标签 ,用 来 在 网 页 中 显示 图 像 ,其 常用 属性 如 下 。 

src 属性 告诉 浏览 器 图 片 的 具体 位 置 ,就 像 链 接 的 href 属性 告诉 浏览 器 要 链接 到 的 文 
件 一 样 。 

alt 属性 代表 图 片 的 蔡 代 文字 。 有 些 浏 览 者 不 想 看 到 图 片 (比如 由 于 网 速 太 慢 ), 有 些 早 
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期 的 浏览 器 也 不 支持 图 片 ,还 有 一 种 可 能 是 把 图 片 的 具体 位 置 写 错 了 ,这 些 情况 浏览 者 是 看 
不 到 图 片 的 ,这 时 alt 可 以 在 图 片 的 位 置 上 显示 出 代替 的 文字 ,这 是 非常 有 用 的 。 

title 属性 指示 图 片 的 提示 文字 , 当 和 鼠标 停留 到 图 片上 时 ,会 提示 相关 文字 。 

(11) 超 链接 标签 二 a 二 

超 链 接 是 WWW 的 魅力 所 在 ,是 超 文 本 的 一 个 重要 特征 。 它 可 以 链接 文本 、 图 片 、 程 
序 .音乐 和 影像 等 文件 。 

链接 a 标签 的 语法 为 


<a href = "URL"> 显 示 的 文字 </a> 


其 常用 属性 如 下 。 

href 是 链接 属性 ,告诉 浏览 器 链接 到 的 网 址 (URL),URL 是 要 链接 到 的 网 页 或 者 文 
件 。URL 可 以 是 一 个 绝对 的 地 址 ,如 http://www. sina. com. cn/; 或 者 是 一 个 相对 网 页 ， 
如 index. html。URL 除了 是 网 页 外 ,还 可 以 是 其 他 的 文件 (如 文本 文件 .pdf 文件 和 zip 文 
件 等 ) . 锚 标签 和 E-mail 地 址 。 

target 是 链接 的 目标 属性 ,指定 所 链接 的 页 面 在 浏览 器 窗口 中 的 打开 方式 , 它 的 参数 值 
主要 有 : _blank、parent、_self、_top。 

如 超 链接 一 a href= "http://www. sina. com. cn/ "过 新 浪 二 /a 之 可 以 链接 到 新 浪 网 站 。 

(12) 表格 标签 

HTML 表格 标签 用 二 table 之 表示 。 一 个 表格 可 以 分 成 很 多 行 (row), 用 二 tr 二 表示 ; 
每 行 又 可 以 分 成 很 多 单元 格 (cell) ,用 二 td 二 表示 。 

表格 常用 属性 有 宽 、 高 .边框 .背景 颜色 、 背 景 图 片 、 对 齐 方式 、 填 充 和 间距 等 。 下 面 分 别 
对 这 些 属性 进行 介绍 。 

表格 的 宽 和 高 分 别 用 width 和 height 属性 来 表示 。 宽 、 高 默认 的 单位 为 像素 ,可 以 给 
表格 设置 固定 像素 的 宽 高 值 ,如 代码 二 table width 二 400 height=300 二 一 /table> 设 置 表格 
的 宽度 为 400px, 高 度 为 300px。 也 可 以 给 表格 设置 百分比 的 宽 高 值 .如 代码 二 table width 一 
40% 二 二 /table 二 设置 表格 的 宽度 为 浏览 器 窗口 的 40%。 

表格 的 边框 用 border 属性 来 表示 ,边框 的 单位 默认 为 像素 (px) ,给 表格 添加 边框 可 通 
过 给 表格 的 二 table 二 标签 添加 border 属性 实现 。border 属性 设置 的 值 越 大 ,表格 的 边框 就 
越 粗 。 

表格 的 背景 颜色 是 通过 bgcolor 属性 来 设置 的 ,而 背景 图 片 则 是 通过 background 属性 
来 进行 设置 的 。 

[2] FLYV 格式 是 Flash Video 格式 的 简称 , 随 着 Flash MX 的 推出 ,Macromedia 公司 开 
发 了 属于 自己 的 流 媒 体 视频 格式 一 一 FLV 格式 。FLV 流 媒 体格 式 是 一 种 新 的 视频 格式 ， 
由 于 它 形成 的 文件 极 小 、 加 载 速度 也 极 快 ,这 就 使 得 网 络 观 看 视频 文件 成 为 可 能 ,FLYV 视频 
格式 的 出 现 有 效 地 解决 了 视频 文件 导入 Flash 后 ,使 导出 的 SWF 格式 文件 体积 庞大 ,不 能 
在 网 络 上 很 好 地 使 用 等 缺点 。 目 前 各 在 线 视频 网 站 均 采用 此 视频 格式 ,如 新 浪 博客 .优酷 、 
土豆 等 无 一 例外 ,FLV 已 经 成 为 当前 网 络 视频 文件 的 主流 格式 。 

提示 : 本 书 由 于 篇 幅 限 制 不 能 展开 讲述 本 章 内 容 , 如 需 详 细 了 解 Dreamweaver CS5 的 相 
关 操 作 , 可 以 参考 书籍 (网 页 设计 基础 与 实 训 》( 吴 代 文 ,清华 大 学 出 版 社 ,2011 年 6 月 第 一 版 )。 
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职业 技能 知识 点 考核 

1. 填空 题 

(1) 图 片 标签 二 img 过 的 属性 告诉 浏览 器 图 片 的 具体 位 置 ,就 像 链 接 的 href 属 
性 告诉 浏览 器 超 链 接 要 链接 的 目标 文件 一 样 。 

(2) 用 于 设置 网 页 标题 的 HTML 标签 是 

(3) HTML 总 共 提 供 个 等 级 的 标题 。 

2. 简 答题 


(1) 列举 超 链接 标签 二 a 二 的 target 属性 的 4 种 可 选 参数 值 ,并 说 明 每 种 参数 值 的 
意义 。 
(2) 列举 组 成 表格 的 HTML 标签 ,并 简要 说 明 每 种 标签 的 意义 。 


网 站 及 网 页 的 色彩 搭配 


网 站 的 色彩 搭配 非常 重要 ,色彩 搭配 好 的 网 站 能 给 浏览 者 留 下 很 好 的 印象 ,而 色彩 搭配 
不 好 的 网 站 则 很 难 吸 引 浏 览 者 。 本 模块 主要 介绍 色彩 搭配 的 相关 知识 。 内 容 包 括 三 原色 、 
常见 网 页 色彩 、 色 彩 的 冷暖 视觉 ,网 页 的 安全 色 、 网 站 色彩 规划 与 搭配 原理 和 常见 配色 方 
案 等 。 

能 力 目 标 

1. 能 区 分 冷暖 色调 

2. 能 用 Photoshop CS5 拾取 图 片 颜 色 

3. 能 根据 网 站 内 容 规 划 网 站 色调 

知识 目标 
， 三 原色 
.冷暖 色 
.常见 网 页 颜色 代码 
.常见 网 页 配色 方案 


必 性 


知识 储备 


知识 1 色彩 的 基础 知识 


在 物理 学 中 ,颜色 由 红 ,、 绿 和 蓝 三 原色 中 (又 叫 三 基色 ) 构 成 。 三 种 原色 的 不 同 组 合 , 构 
成 了 现实 世界 中 的 所 有 丰富 多 彩 的 颜色 。 黑 色 不 是 有 颜色 ,而 是 黑色 物体 不 反射 任何 光线 ， 
才 表 现 为 黑色 。 白 色 不 是 没有 颜色 ,而 是 含有 全 部 的 颜色 。 

在 设计 中 ,颜色 分 为 彩色 与 非 彩色 两 种 。 非 彩色 是 指 含 有 灰 . 白 . 黑 三 系 的 颜色 。 彩 色 
是 指 非 彩色 以 外 的 所 有 颜色 。 

网 页 HTML 中 的 色彩 表达 即 是 分 别 用 红 、 绿 和 蓝 三 种 颜色 的 值 来 表示 的 。 分 别 把 红 、 
绿 和 蓝 三 种 颜色 分 为 256 个 (0 一 255) 等 级 ,用 不 同 的 组 合 形成 不 同 的 颜色 。 经 过 组 合 后 网 
页 就 可 以 表示 22 种 颜色 。 通 常 每 种 颜色 的 值 用 两 位 十 六 进 制 数 来 表示 ,并 以 “并 ?开头 。 如 红 
色 表 示 为 #FF0000, 绿 色 表 示 为 #00FF00, 蓝 色 表 示 为 #0000FF, 白 色 表 示 为 #FFFFFF。 在 进 
行 网 页 设计 时 ,需要 记忆 和 识别 这 些 常用 的 颜色 代码 ,如 表 4-1 所 示 是 一 些 需 要 记忆 的 常 
网 页 颜色 的 代码 。 
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表 4-1 常见 的 网 页 颜色 代码 


代码 颜色 代码 颜色 
#FFFFFF 白色 #0000FF 蓝 色 
#000000 黑色 #FFFFO00 黄色 
#FF0000 红色 #D9D9D9 灰色 
#00FF00 绿色 #9F79EE 橄榄 色 


当然 也 可 以 用 颜色 的 英文 名 字 代 表 相 应 的 颜色 ,如 表 4-2 所 示 是 一 些 需要 记忆 的 常 
网 页 颜色 的 英文 名 。 
表 42 常见 的 网 页 颜色 英文 名 


英文 名 颜色 英文 名 颜色 
White 白色 Blue 蓝 色 
Black 黑色 Yellow 黄色 
Red 红色 Brown 棕色 
Green 绿色 Dark Red 深 红 


有 时 看 到 自己 喜欢 的 颜色 ,但 不 知道 颜色 的 代码 或 英文 名 时 ,可 以 用 软件 (如 
Photoshop CS5) 提 取 颜 色 值 。 具 体 步骤 如 下 。 

(1) 用 Photoshop CS5 打开 已 有 图 片 , 对 于 网 页 可 以 采用 打印 屏幕 的 形式 抓 取 网 页 作 
为 图 片 ,然后 再 用 Photoshop CS5 打开 图 片 。 

(2) 单 击 Photoshop CS5 的 工具 栏 下 方 的 “设置 前 景色 ”按钮 ,打开 “ 拾 色 器 ”对 话 框 。 
如 图 4-1 所 示 。 然 后 将 鼠标 光标 移动 到 图 片 要 拾取 颜色 的 地 方 ,此 时 鼠标 光标 会 变 成 吸管 
状 。 单 击 即 可 获取 当前 的 颜色 值 ,如 图 4-1 所 示 。 

撞 色 器 ( 前 景色 》 
新 的 


当 首 ER 
cH: |180 | 上 度 OL: 
Os:|50 |% Oa |- 
OB: [80 |% Ob: |- 
Or: Wa 
Os: 了 


只 有 Web 颜色 


图 4-1 “ 拾 色 器 "对 话 框 
(3) 从 图 4-1 可 以 看 出 ,拾取 的 颜色 值 为 #66cccc。 


知识 2 网 页 色彩 的 冷暖 视觉 
冷暖 本 来 是 指 人 的 皮肤 对 温度 的 感觉 ,但 是 不 同 的 颜色 ,可 以 根据 日 常生 活 中 对 这 些 颜 


站 有 网 页 的 色彩 本 


色 的 认识 ,给 人 的 视觉 造成 一 定 的 冷暖 感觉 。 对 于 大 多 数 人 来 说 ,橘红 、 黄 色 以 及 红色 一 端 
的 色 系 总 是 和 温暖 .热烈 等 相 联系 ,因而 称 之 为 暖色 调 ; 而 蓝 色 系 则 和 平静 、 安 逸 、 凉 快 相关 
联 ,就 称 之 为 冷色 调 。 从 色彩 心理 学 角度 来 考虑 ,橘红 的 纯色 被 定 为 最 暖色 ,在 色 立 体 上 为 
暖 极 ; 天 蓝 的 纯色 被 定 为 最 冷色 ,在 色 立 体 上 称 为 冷 极 ,并 用 冷暖 两 极 的 关系 来 划分 色 立 体 
其 他 颜色 的 冷暖 程度 与 冷暖 差别 。 与 暖 极 近 的 为 暖色 ,与 冷 极 近 的 为 冷色 ,与 两 极 距离 相等 
的 颜色 , 称 为 中 间 色 。 由 此 可 知 , 红 、 检 和 黄 等 为 暖色 , 蓝 绿 、 蓝 和 蓝 紫 是 冷色 , 黑 、 白 、 灰 、 紫 
等 色 为 中 性 色 。 

如 图 4-2 所 示 为 百度 网 址 大 全 的 网 页 (http://site. baidu. com/) ,网 页 中 使 用 了 白色 的 
主 色调 ,另外 搭配 了 一 些 浅 蓝 色 。 网 页 的 视觉 效果 非常 淡雅 清 夹 。 这 个 网 页 是 一 种 很 好 的 
浅 色 搭 配方 案 。 
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图 4-2 淡雅 清爽 的 百度 网 址 大 全 首页 


如 图 4-3 所 示 为 淘宝 网 的 首页 (http://www. taobao. com) ,网 页 使 用 了 大 量 的 橙色 和 
黄色 。 网 页 的 视觉 效果 非常 温暖 活泼 。 


知识 3 网 页 的 安全 色 


不 同 的 硬件 环境 、 操 作 系统 、 浏 览 器 对 各 种 颜色 的 表现 有 所 不 同 。 当 显示 的 颜色 与 设计 
的 颜色 不 同时 ,就 会 产生 失真 。 但 所 有 的 这 些 环境 都 可 以 显示 216 种 颜色 集合 ( 调 色 板 ) ,也 
就 是 说 这 些 颜 色 在 任何 计算 机 上 的 显示 都 是 相同 的 。 所 有 网 页 中 如 果 使 用 这 216 种 颜色 ， 
就 可 以 避免 失真 的 问题 。 

网 络 安 全 色 是 当红 色 (Red) .绿色 (Green)、 蓝 色 (Blue) 颜 色 数字 信和 号 值 为 0.51.102、 
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图 4-3 温暖 活泼 的 淘宝 网 首页 


153、204、255 时 构成 的 颜色 组 合 
色 为 6 种 )。 

当 网 页 中 的 有 些 颜 色 显 示 设 备 无 法 正确 还 原 时 ,显示 设备 就 会 使 用 与 需要 相似 的 颜色 ， 
使 显示 的 颜色 尽量 达到 需要 的 效果 。 因 此 用 这 216 种 颜色 表现 高 清晰 度 的 图 片 时 可 能 会 有 
所 欠缺 ,但 表现 网 页 的 文字 .背景 的 颜色 还 是 完全 可 以 的 。 

使 用 216 种 安全 色 是 网 页 设计 中 积累 经 验 的 结果 ,在 进行 网 页 的 页 面 设 计时 ,要 尽量 使 
用 网 页 安全 色 , 这 样 就 可 以 更 准确 、 真 实地 表现 网 页 的 颜色 效果 。 


知识 4 常见 网 页 色彩 搭配 分 析 


一 共有 6X6X6 二 216 种 颜色 (其 中 彩色 为 210 种 , 非 彩 


不 同 的 色彩 会 使 人 产生 不 同 的 联想 与 感觉 ,不 同类 型 的 网 站 一 般 有 不 同 的 风格 与 色调 。 
这 些 不 同 的 色调 与 风格 可 以 体现 出 网 站 不 同 的 行业 与 内 容 。 

1. 商务 与 时 尚 

在 电子 商务 日 益 发 展 的 今天 .各 种 电子 商务 网 站 、 团 购 网 站 大 量 涌现 。 这 些 网 站 在 网 页 
配色 时 ,一 般 大 多 使 用 橙色 和 黄色 等 暖色 调 表 现 商务 与 时 尚 的 主题 。 通 过 这 些 暧 色调 吸引 
浏览 者 ,让 浏览 者 在 浏览 网 站 的 过 程 中 有 一 个 温馨 舒 适 的 感觉 ,同时 激发 浏览 者 的 购买 欲 
望 。 如 图 4-3 所 示 为 淘宝 网 的 首页 (http://www. taobao. com) ,网 页 使 用 了 大 量 的 橙色 和 
黄色 。 网 页 的 视觉 效果 非常 温暖 活泼 。 

又 如 团购 网 站 糯米 网 的 首页 采用 了 大 量 的 深 红 色 、 橙 色 和 黄色 等 暖色 调 作 为 网 站 的 主 
色调 ,给 浏览 者 一 种 温暖 活泼 的 感觉 ,体现 了 商务 和 时 尚 的 主题 ,如 图 4-4 所 示 。 
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图 4-4 团购 网 站 糯米 网 首页 


2. 简约 与 高 贵 

对 于 某 些 网 站 ,可 以 使 用 简约 的 色彩 搭配 。 但 是 版 面 的 简约 与 简单 并 不 是 一 个 概念 。 
网 页 在 简约 的 色彩 搭配 中 ,也 能 够 体现 出 网 站 的 档次 与 内 容 。 

例如 谷歌 网 站 的 首页 (http://www. google. com. hk/) ,如 图 4-5 所 示 。 网 站 使 用 简约 
的 布局 与 颜色 。 

谷歌 网 站 首页 主要 以 白色 和 蓝 色 两 种 简单 的 颜色 进行 搭配 与 布局 。 整 个 网 站 的 颜色 清 
晰 淡雅 ,简约 而 不 简单 。 同 时 ,简单 的 颜色 风格 又 不 失 设计 的 专业 性 。 

而 结合 谷歌 的 搜索 功能 ,人 们 更 关注 的 是 网 站 的 功能 ,所 以 就 更 愿意 接受 这 种 简单 的 颜 
色 搭 配 与 页 面 布 局 。 

3. 神秘 与 优雅 

对 于 宣传 某 些 具 有 一 定 感情 色彩 产品 或 表现 某 些 特定 内 容 的 网 站 ,网 站 的 不 同色 彩 也 
可 以 表现 出 不 同 的 情感 。 例 如 ,红色 和 明亮 的 黄色 调 成 的 橙色 给 人 活泼 .愉快 .兴奋 的 感受 。 
青色 .青绿 色 .青紫 色 让 人 感到 安静 沉稳 .踏实 。 蓝 色 很 容易 让 人 联想 到 大 海 与 天 空 ,白色 
很 容易 让 人 联想 到 冰 天 与 雪 地 。 人 们 在 浏览 网 站 时 ,会 对 网 站 的 不 同色 彩 搭配 产生 类 似 的 
情感 联想 。 

对 于 有 一 定 感情 倾向 的 网 站 ,需要 根据 所 要 表达 的 情感 采用 正确 的 配色 。 在 使 用 颜色 
表达 情感 倾向 的 色彩 搭配 中 ,可 以 使 用 多 种 色彩 对 比 强烈 的 颜色 以 增强 这 种 表达 效果 。 

例如 ,紫色 与 黑色 可 以 表现 出 一 种 神秘 的 气氛 ,休闲 类 的 网 站 可 以 使 用 这 种 效果 。 紫 色 
与 粉红 色 的 搭配 ,可 以 表现 出 优雅 的 气氛 ,购物 类 的 网 站 可 以 使 用 这 种 颜色 搭配 。 
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图 4-6 中国 宋 庆 龄 基金 会 网 站 首页 
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4. 激情 与 梦幻 

网 站 使 用 明快 的 颜色 与 强烈 的 颜色 对 比 , 可 以 体现 出 一 种 热情 躁动 的 情感 气氛 。 如 果 
网 站 需要 体现 出 这 种 热情 的 气氛 ,可 以 使 用 强烈 的 暖色 进行 搭配 。 

例如 网 易 体 育 NBA 频道 (http://sports. 163. com/nba/) 就 采用 了 具有 强烈 色彩 的 大 
红色 调 ,如 图 4-7 所 示 。 网 页 的 许多 链接 、 图 片 和 广告 采用 大 红颜 色 , 整 个 网 页 色彩 搭配 体 
现 了 NBA 的 激情 与 活力 。 
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图 4-7 网 易 体 育 NBA 频道 


5. 科技 与 教育 

科技 与 教育 类 网 站 通常 比较 正式 和 庄重 ,这 类 网 站 一 般 都 使 用 冷色 调 的 颜色 风格 来 体 
现 , 目 的 是 给 浏览 者 一 种 清新 、` 淡 雅 和 高 贵 的 感觉 。 

例如 金融 界 网 站 科技 频道 (http://tech. jrj. com. cn/) 主要 采用 了 蓝 色 和 白色 等 冷色 
调 ,如 图 4-8 所 示 。 网 页 的 许多 链接 .图 片 和 广告 采用 淡 蓝 颜色 ,整个 网 页 色彩 搭配 给 浏览 
者 一 种 清新 .淡雅 和 高 贵 的 感觉 。 

又 如 清华 大 学 网 站 (http://www. tsinghua. edu. cn/) 采 用 白色 作为 网 页 底 色 ,图片 以 
紫色 和 淡 蓝 等 颜色 为 主 , 如 图 4-9 所 示 。 整 个 网 页 色彩 搭配 也 给 浏览 者 一 种 清新 ,淡雅 和 高 
贵 的 感觉 。 


知识 5 网 站 总 体 色彩 规划 


网 站 在 设计 效果 图 时 ,需要 对 网 站 的 色彩 进行 整体 的 规划 ,对 网 页 的 颜色 有 一 个 整体 的 
定位 。 所 有 网 页 效果 的 设计 需要 在 这 个 整体 颜色 定位 下 进行 ,其 他 颜色 的 使 用 需要 与 网 页 
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内 容 的 风格 相 一 致 

1. 定义 网 站 的 色彩 基调 

定义 网 站 的 色彩 基调 就 是 选择 一 个 颜色 作为 网 站 最 主要 的 风格 色调 。 需 要 注意 以 下 几 
个 方面 。 


(1) 网 站 的 色彩 要 鲜明 。 人 们 在 浏览 网 站 时 ,更 愿意 接受 鲜明 的 颜色 。 黯 淡 的 颜色 会 
给 人 一 种 压抑 的 感觉 。 

(2) 网 站 的 色彩 要 独特 。 一 个 优秀 的 网 站 ,往往 与 别 的 网 站 有 着 不 同 的 色彩 风格 。 

户 可 能 根据 网 站 的 独特 风格 而 接受 这 个 网 站 。 

(3) 色彩 需要 与 网 站 的 内 容 协 调 。 网 站 色彩 应 该 依据 网 站 内 容 给 消费 者 营造 相应 的 气 
氛 。 例 如 科技 和 教育 类 网 站 可 以 使 用 浅 蓝 色 ,婚庆 类 网 站 可 以 使 用 粉红 色 ,庆典 类 网 站 可 以 
使 用 大 红色 。 

(4) 要 注意 色彩 和 颜色 的 联想 性 。 例 如 ,黑色 让 人 联想 到 夜晚 , 蓝 色 让 人 联想 到 天 空 或 
海洋 ,大 红色 可 以 让 人 联想 到 喜庆 等 。 

一 个 网 站 或 新 闻 的 主题 ,通常 使 用 与 这 一 主题 相关 的 颜色 色调 。 例 如 ,喜庆 的 网 站 或 新 
闻 通 常 使 用 大 红色 ,如 每 逢 重大 节日 (建党 、 建 军 和 国庆 等 ), 各 主要 大 型 网 站 一 般 都 采用 鲜 
艳 欢 快 的 色调 ,相应 的 新 闻 一 般 也 用 大 红色 显示 ; 而 当 国家 出 现 一 些 令 人 悲痛 的 灾害 (地 震 
和 泥石流 等 ) 时 ,各 主要 大 型 网 站 一 般 都 采用 灰暗 的 色调 ,相应 的 新 闻 一 般 也 用 黑色 显示 。 

2. 站 点 内 各 栏目 色彩 搭配 原则 

在 对 网 站 进行 颜色 搭配 时 ,需要 遵循 一 些 颜 色 搭配 的 原理 和 方法 。 这 些 配色 原理 是 根 
据 长 期 设计 的 经 验 和 人 们 对 颜色 的 感知 形成 的 。 网 站 的 各 个 栏目 ,因为 需要 体现 出 不 同 的 
内 容 和 浏览 方式 ,需要 针对 不 同 的 网 站 栏目 进行 不 同 的 配色 。 

一 般 来 说 ,需要 吸引 用 户 注意 力 的 栏目 应 该 使 用 鲜明 的 颜色 。 不 同 的 栏目 之 间 应 该 有 
一 些 颜色 的 对 比 ,增强 网 页 色彩 的 层次 感 。 


知识 6 网 页 色彩 搭配 原理 


据 研究 ,彩色 效果 给 人 留 下 的 印象 是 非 彩色 效果 的 三 倍 以 上 。 也 就 是 说 ,在 一 般 情 况 
这。 彩色 至 学 比 非 艇 色 效 果 更 能 给 人 留 下 深刻 的 记忆 。 

在 网 页 中 的 一 般 处 理 方法 是 主要 内 容 文字 用 非 彩色 (黑色 ) ,边框 .背景 .图片 等 次 要 内 
容 用 彩色 。 这 样 ,页 面 的 整体 感觉 很 清爽 但 不 单调 ,也 不 会 给 人 眼花 绕 乱 的 感觉 。 

在 非 彩色 的 搭配 中 ,黑白 是 最 基本 和 最 简单 的 搭配 , 白 底 黑 字 或 白字 黑 底 页 面 的 内 容 都 
非常 自然 。 灰 色 是 万 能 色 ,可 以 和 很 多 种 颜色 搭配 ,可 以 实现 不 同 颜色 的 和 谐 过 渡 。 在 网 页 
中 , 当 有 两 种 对 比 很 强烈 的 颜色 组 合 在 一 起 ,而 不 好 搭配 其 他 颜色 时 ,可 以 考虑 使 用 灰色 为 
过 渡 的 中 间 色 。 

色彩 搭配 是 一 个 比较 复杂 的 内 容 。 网 页 进行 配色 时 ,需要 先 确 定 网 页 的 主 色调 。 然 后 
根据 主 色调 再 确定 搭配 的 颜色 。 网 站 中 不 要 使 用 过 多 的 颜色 ,一 个 网 页 的 颜色 应 尽量 控制 
在 三 种 颜色 以 内 。 使 用 太 多 种 颜色 可 能 使 网 站 颜色 混杂 ,视觉 效果 混乱 。 

背景 与 文本 的 颜色 对 比 要 强烈 ,不 要 将 背景 与 文本 使 用 相近 的 颜色 。 不 要 使 用 鲜明 的 
花纹 作为 背景 ,这 样 无 法 突显 出 网 页 的 内 容 , 人 们 浏览 网 页 时 也 会 很 吃力 。 


04 模 块 。 网 站 及 网 页 的 色彩 搭配 
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知识 7 常见 的 几 种 网 页 配色 方案 


人 们 在 进行 网 页 效果 设计 时 ,已 经 认可 了 某 些 颜 色 的 使 用 方法 和 颜色 的 搭配 方案 。 不 
同 的 颜色 可 以 对 应 于 不 同 的 内 容 \ 不 同 风格 的 网 页 。 下 面 是 人 们 在 进行 网 页 设计 时 总 结 的 
网 页 配色 方案 。 

1. 红色 色调 的 使 用 与 搭配 

红色 的 色 感 温暖 ,性 格 刚烈 而 外 向 ,可 以 对 人 形成 强烈 的 刺激 。 红 色 比 其 他 颜色 更 能 吸 
引 人 的 注意 ,也 可 以 引起 人 的 兴奋 、 激 动 、 紧 张 和 冲 动 的 感觉 。 过 多 的 红色 也 会 引起 人 的 视 
觉 疲 劳 , 使 人 眼 的 视觉 感 减弱 。 在 红色 中 可 以 搭配 一 些 其 他 颜色 丰富 网 页 的 效果 。 

(1) 在 红色 中 加 入 一 些 黄色 ,会 增强 红色 的 色 感 ,可 使 红色 更 加 趋向 于 躁动 和 不 安 。 

(2) 在 红色 中 加 入 一 些 蓝 色 ,会 减弱 红色 的 色 感 ,可 使 红色 更 加 趋向 于 文雅 和 柔和。 

(3) 在 红色 中 加 入 一 些 黑 色 , 会 使 红色 的 性 格 变 得 沉稳 ,给 人 以 厚重 和 朴实 的 感觉 。 

(4) 在 红色 中 加 入 一 些 白色 ,会 使 色 感 温柔 , 趋 于 含蓄 、 羞 涩 和 娇嫩 。 

2. 绿色 色调 的 使 用 与 搭配 

绿色 是 大 自然 中 生命 的 颜色 ,给 人 们 以 生命 .成 长 .希望 的 气息 。 绿 色 是 人 们 最 愿意 接 
受 的 纯 自 然 感 觉 。 绿 色 的 性 格 平 和 安稳 ,是 一 种 温顺 、 恬 静 、 自 然 和 优美 的 颜色 。 

(1) 在 绿色 中 加 入 一 些 黄色 ,会 使 绿色 的 性 格 趋 于 活 泌 和 友善 。 

(2) 在 绿色 中 加 入 一 些 黑色 ,会 使 绿色 的 性 格 趋 于 庄重 和 成 熟 。 

(3) 在 绿色 中 加 入 少量 的 白色 ,会 使 绿色 的 性 格 趋 于 洁净 .清爽 和 鲜嫩 。 

3, 蓝 色 色调 的 使 用 与 搭配 

蓝 色 的 色 感 冷清 ,性 格 朴实 内 向 ,是 一 种 有 助 于 人 头脑 冷静 的 颜色 。 蓝 色 可 以 很 容易 让 
人 感觉 到 天 空 大海 的 氛围 ,提供 一 个 深远 .广阔 和 平静 的 空间 ,可 以 衬托 其 他 活跃 的 颜色 。 
蓝 色 淡化 后 仍然 能 保持 较 强 个 性 ,不 同 的 蓝 色 给 人 完全 不 同 的 感觉 。 如 果 在 蓝 色 中 分 别 加 
入 少量 的 红 、 黄 、 黑 \ 橙 和 白 等 色 , 会 对 蓝 色 的 色 感 造成 鲜明 的 影响 。 

蓝 色 是 最 养眼 的 颜色 , 蓝 色 的 背景 可 以 使 人 平静 .遐想 。 网 站 常常 使 用 蓝 色 作为 网 站 的 
背景 色 。 而 不 同 的 蓝 色 往往 给 人 完全 不 同 的 感觉 。 

蓝 色 是 现今 网 站 中 最 常 使 用 的 主 色调 。 蓝 色 风 格 的 网 页 最 容易 被 用 户 接受 和 认可 。 很 
多 大 中 型 的 科技 教育 类 和 网 络 公 司 的 网 站 都 是 使 用 蓝 色 风格 。 

4. 黄色 色调 的 使 用 与 搭配 

黄色 可 以 表现 出 冷漠 高傲 、 敏 感 和 不 安宁 的 视觉 印象 。 在 所 有 的 颜色 中 ,黄色 的 色 感 
最 容易 发 生变 化 。 只 要 在 纯 黄色 中 搭配 少量 的 其 他 颜色 ,其 色 感 和 表现 出 的 性 格 就 会 发 生 很 
大 的 变化 。 黄 色 在 搭配 其 他 的 颜色 时 ,会 因为 色彩 的 对 比 给 黄色 带 来 完全 不 同 的 色彩 感觉 。 

(1) 在 黄色 中 加 入 少量 的 蓝 色 ,会 使 其 转化 为 嫩绿 色 ,可 使 黄色 表现 出 平和 潮 润 的 感觉 。 

(2) 黄色 和 红色 搭配 在 一 起 ,会 使 其 转化 为 橙色 , 色 感 会 从 冷漠 、 高 傲 转化 为 有 分 寸 感 
的 热情 和 温暖。 

(3) 在 黄色 中 加 入 少量 的 黑色 ,会 使 其 转化 为 橄榄 绿色 , 色 感 表现 成 熟 和 随和 的 感觉 。 

(4) 在 黄色 中 加 入 少量 的 白色 ,会 使 色 感 变 得 柔和 ,可 以 淡化 黄色 的 性 格 感 ,使 颜色 趋 
近 于 含蓄 和 易于 接近 。 
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5. 栓 色 色调 的 使 用 与 搭配 

梅 色 具 有 红 和 黄 的 成 分 ,其 性 格 趋 于 甜美 .亮丽 和 芳香 ,也 有 红色 的 效果 ,性 格 趋 于 兴奋 
和 狂躁。 

橙色 中 加 入 少量 的 白色 ,可 淡化 橙色 的 效果 ,使 橙色 的 色 感 趋 于 焦躁 和 无 力 。 

6. 紫色 色调 的 使 用 与 搭配 

紫色 的 明度 在 彩色 的 色 料 中 是 最 低 的 。 紫 色 的 低 明度 给 人 一 种 沉 问 和 神秘 的 感觉 

(1) 紫色 中 红 的 成 分 较 多 时 ,就 会 给 和 以 压抑 威胁 的 感觉 

(2) 紫色 中 加 入 黑色 ,其 感觉 就 趋 于 沉 问 、 伤 感 和 恐怖 。 

(3) 紫色 中 加 入 白色 ,就 会 变 得 优雅 ,娇气 ,并 充满 女性 的 技 力 。 

7. 自 色色 调 的 使 用 与 搭配 

白色 的 色 感 光明 ,性 格 相 实 、 纯 洁 和 快乐 。 给 人 以 雪山 和 冰川 的 感觉 。 如 果 在 白色 中 加 
入 其 他 的 颜色 ,都 会 影响 其 纯洁 性 ,使 其 性 格 变 得 舍 蓄 ,会 减弱 白色 的 色 感 。 

(1) 白色 搭配 少量 的 红色 ,会 感受 到 一 种 粉红 色 , 鲜 同 而 充满 诱惑 。 

(2) 白色 搭配 少量 的 绿色 ,就 如 刚 出 土 的 绿 芽 , 给 人 一 种 稚嫩 和 柔和 的 感觉 

(3) 白色 措 配 少量 的 蓝 色 ,会 使 气氛 变 得 清冷 和 洁净 。 

(4) 白色 搭配 少量 的 黄色 ,会 成 为 一 种 乳 黄色 ,给 人 一 种 温 志 的 感觉 。 

(5) 白色 搭配 少量 的 橙色 ,就 如 同 沙漠 戈壁 ,如 同 干裂 的 土地 ,有 干燥 的 气氛 。 

(6) 白色 搭配 少量 的 紫色 ,就 如 同 紫色 兰花 ,让 人 联想 到 淡淡 的 芬芳 。 


引 例 : 经 典 网 页 设计 色彩 搭配 实例 欣赏 


网 页 的 色彩 搭配 ,特别 是 大 型 网 站 首页 的 色彩 搭配 ,可 以 充分 体现 一 个 网 站 的 设计 思想 
和 风格 。 下 面 以 一 个 实例 讲解 网 页 色彩 搭配 需要 注意 的 问题 。 如 图 4-10 所 示 为 支付 宝 网 
站 首页 ,网 页 的 色彩 搭配 非常 温暖 和 谐 , 各 种 颜色 搭配 合理 。 
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图 4-10 支付 宝 首页 
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翁 

支付 宝 网 站 的 颜色 搭配 ,代表 电子 商务 网 站 的 配色 趋势 ,有 很 多 内 容 值得 学 习 与 借鉴 。 

(1) 网 站 使 用 白色 背景 ,橙色 色调 ,合理 搭配 一 些 蓝 色 和 绿色 ,页面 美 观 .和 谐 ,大 方 。 

(2) 网 站 的 Logo 使 用 橙色 和 蓝 色 ,对 比 强烈 。 

(3) 网 站 的 导航 条 使 用 白 底 橙 字 或 橙 底 白字 ,对 比 强烈 ,美观 大 气 。 

(4) 网 站 巧妙 地 使 用 了 一 个 橙 白色 的 广告 ,增强 了 网 页 的 活力 和 层次 感 ,使 网 页 的 颜色 
有 很 大 的 跳跃 性 。 

(5) 网 页 主要 以 暖色 调 为 主 , 但 也 有 少量 冷色 调 的 图 片 和 文字 ,这 很 好 地 丰富 了 网 页 的 
颜色 元 素 。 


知识 点 拓展 


原色 是 指 不 能 透 过 其 他 颜色 的 混合 调配 而 得 出 的 “基本 色 ”, 又 称 为 基色 , 即 用 以 调配 其 
他 色彩 的 基本 色 。 以 不 同比 例 将 原色 混合 ,可 以 产生 出 其 他 的 新 颜色 。 由 于 人 类 肉眼 有 三 
种 不 同 颜色 的 感光 体 , 因 此 所 见 的 色彩 空间 通常 可 以 由 三 种 基本 色 所 表达 ,这 三 种 颜色 被 称 
为 “三 原色 ”。 一 般 来 说 大 加 型 的 三 原色 是 红色 绿色. 蓝 色 ,而 消减 型 的 三 原色 是 品 红色 、 黄 
色 .青色 。 

人 的 眼睛 是 根据 所 看 见 的 光 的 波长 来 识别 颜色 的 。 可 见 光谱 中 的 大 部 分 颜色 可 以 由 三 
种 基本 色光 按 不 同 的 比例 混合 而 成 ,这 三 种 基本 色光 的 颜色 就 是 红 (Red)、 绿 (Green) 、 蓝 
(Blue) 三 原色 光 。 原 色 的 色 纯 度 最 高 ,最 纯净 、 最 鲜艳 ,三 原色 各 自 对 应 的 波长 分 别 为 
700nm、546. 1nm、435. Snm。 这 三 种 光 以 相同 的 比例 混合 , 且 达 到 一 定 的 强度 ,就 呈现 白色 
(白光 ); 若 三 种 光 的 强度 均 为 零 ,就 是 黑色 (黑暗 )。 这 就 是 加 色 法 原理 ,加 色 法 原理 被 广泛 
应 用 于 电视 机 ,监视 器 等 主动 发 光 的 产品 中 。 

而 在 打印 .印刷 ` 油 潜 绘画 等 靠 介质 表面 反射 被 动 发 光 的 场合 ,物体 所 呈现 的 颜色 是 光 
源 中 被 颜料 吸收 后 所 剩余 的 部 分 ,所 以 其 成 色 的 原理 叫做 减 色 法 原理 。 减 色 法 原理 被 广泛 
应 用 于 各 种 被 动 发 光 的 场合 。 在 减 色 法 原理 中 的 三 原色 颜料 分 别 是 品 红 (Magenta)、 黄 
(Yellow) 和 青 (Cyan)。 


职业 技能 知识 点 考核 


1. 填空 题 

(1) 一 般 来 说 释 加 型 的 三 原色 是 5 和 ,而 消减 型 的 三 原色 是 
和 。 

(2) 一 般 来 说 ， R 和 等 为 暖色 x 和 
是 冷色 。 

(3) 网 络 安全 色 一 共有 种 颜色 ,其 中 彩色 为 种 , 非 彩 色 为 种 。 

2. 简 答 题 


(1) 定义 网 站 的 色彩 基调 需要 注意 哪 几 个 方面 ? 
(2) 简 述 网 页 色彩 的 搭配 原理 。 


网 页 的 排版 布局 


在 进行 网 站 设计 时 ,需要 对 网 站 的 版 面 与 布局 进行 一 个 整体 的 规划 ,这 就 是 网 站 的 排版 
布局 。 本 模块 主要 讲解 页 面 的 基本 构成 .常见 的 页 面 结构 、 页 面 布局 设计 的 基本 流程 和 常用 
网 页 布局 方法 等 内 容 ,其 中 常用 网 页 布局 方法 是 本 章 的 重点 。 

能 力 目标 

1. 能 使 用 表格 布局 网 页 

2. 能 使 用 框架 布局 网 页 

3. 能 熟练 使 用 CSS 十 DIV 布局 网 页 

知识 目标 

1. 页 面 的 基本 构成 

2. 常见 的 页 面 结 构 类 型 

3. 页面 布局 设计 流程 

4. 常见 页 面 布局 方法 


知识 1 页 面 的 基本 构成 


互联 网 上 的 网 页 多 种 多 样 ,内 容 千 差 万 别 , 组 成 各 异 。 但 是 ,一般 的 网 页 都 包含 标题 ,网 
站 标志 、 页 眉 .导航 栏 .内 容 版 块 和 页 脚 等 部 分 ,如 图 5-1 所 示 。 

1. 网 页 的 标题 

每 个 网 页 都 有 一 个 标题 ,用 于 指示 网 页 的 主要 内 容 。 网 页 的 标题 显示 在 浏览 器 窗口 的 
标题 栏 中 。 在 设计 网 页 时 ,网 页 制作 软件 一 般 会 给 网 页 指定 一 个 默认 标题 ,如 “Untitled 
Document” 或 "无 标题 "等 。 显 然 ,这 样 的 标题 是 毫 无 意义 的 。 在 设计 网 页 时 ,应 该 给 网 页 指 
定 一 个 有 一 定 意义 的 标题 ,使 浏览 者 一 看 到 网 页 标题 就 能 了 解 网 页 包含 的 大 体内 容 。 

2. 站 标 

站 标 就 是 网 站 的 标志 ,也 叫 网 站 Logo, 是 一 个 网 站 的 特色 和 内 涵 的 集中 体现 。 它 是 一 
个 站 点 的 象征 ,一 般 放 在 网 站 首页 的 左上 角 或 显眼 位 置 ,访问 者 能 明显 地 看 到 它 。 一 个 好 的 
站 标 , 可 以 给 浏览 者 留 下 深刻 的 印象 ,在 网 站 的 推广 和 宣传 中 起 到 事半功倍 的 效果 。 例 如 ， 
新 浪 用 字母 Sina 和 大 眼睛 作为 标志 。 站 标 设计 追求 的 是 以 简洁 、 符 号 化 的 视觉 艺术 形象 地 
把 网 站 的 形象 和 理念 长 留 于 人 们 心中 。 
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图 5-1 “北京 大 学 ”首页 


3. 页 收 

页 眉 指 页 面 的 上 部 ,通常 位 于 水 平 放置 的 导航 栏 上 面 。 有 些 网 页 的 页 眉 比 较 明显 ,有 些 
页 面 则 没有 明确 的 划分 ,有 些 甚至 没有 页 眉 。 通 常 ,页 面 左 边 放置 站 标 , 右 边 安排 网 站 的 宗 
旨 或 广告 语 , 或 者 放置 商业 广告 。 页 眉 是 浏览 者 打开 页 面 时 首先 看 到 的 地 方 , 在 商业 网 站 中 
通常 将 页 眉 作 为 广告 位 出 租 。 

页 眉 的 设计 原则 包括 具有 人 鲜明 的 色彩 .语言 具有 号 召 力 \ 文 字 的 字体 清晰 和 图 形 位 置 合 
适 这 4 个 方面 。 页 眉 的 风格 应 该 与 页 面 的 整体 风格 协调 一 致 。 设 计 独特 的 页 眉 也 可 以 像 站 
标 一 样 ,起 到 标识 网 站 的 作用 。 

4. 导航 栏 

导航 栏 是 用 户 在 规划 好 站 点 结构 .开始 设计 主页 时 必须 考虑 的 一 项 内 容 。 导 航 栏 的 作 
用 就 是 让 浏览 者 在 浏览 站 点 时 ,不 会 因为 迷路 而 中 止 对 站 点 的 访问 。 事 实 上 ,导航 栏 就 是 一 
日 超 链 接 ,这 组 超 链接 的 目标 就 是 本 站 点 的 主页 以 及 其 他 重要 页 面 。 在 设计 站 点 中 的 诸 页 
面 时 ,可 以 在 站 点 的 每 个 网 页 上 显示 一 个 导航 栏 ,这 样 ,浏览 者 就 可 以 既 快 又 容易 地 转向 站 
点 的 其 他 主要 网 页 。 

一 般 情况 下 ,导航 栏 应 放 在 网 页 中 较 引 人 注目 的 位 置 , 通 常 是 在 网 页 的 项 部 或 一 侧 。 导 
航 栏 的 实现 方式 也 很 多 ,可 以 采用 脚本 语句 ,也 可 以 利用 动画 或 图 像 按 钮 ,甚至 可 以 直接 采 
文本 链接 ,这 要 根据 网 站 的 具体 需求 来 确定 。 

5. 内 容 版 块 
内 容 版 块 是 页 面 的 主体 ,往往 根据 内 容 的 多 少 划分 为 几 个 栏目 。 每 个 栏目 中 放置 内 容 


NS 


人 05 模 状 网 页 的 排版- 


标题 作为 链接 或 内 容 摘要 ,具体 内 容 包括 文字 、 图 像 和 动画 等 。 页 面 的 内 容 才 是 浏览 者 关注 
的 根本 目标 。 只 有 拥有 丰富 的 内 容 , 才 能 吸引 众多 的 浏览 者 。 因 此 ,对 内 容 版 块 应 该 合理 安 
排 精 心 设计 。 


6. 页 脚 
页 脚 是 指 页 面 的 底部 ,通常 放置 版 权 信息 、 联 系 方法 ,有 时 也 把 导航 栏 .友情 链接 安排 在 
这 里 。 


知识 2 常见 的 网 页 结构 类 型 


.“ 同 ” 字 型 布局 
“ 同 ” 字 型 布局 (又 叫 “ 国 " 字 型 布局 ) 的 结构 特点 是 : 页 面 顶部 为 水 平 放置 的 主导 航 栏 ， 
其 下 大 体 上 分 为 左 中 右 三 栏 ,左边 一 般 放 置 内 容 导 航 、 二 级 栏目 或 热点 内 容 等 ; 右边 一 般 放 
置 站 点 图 片 链 接 ,动画 广告 .搜索 引擎 ,友情 链接 和 注册 登录 信息 等 ; 中 间 为 主要 内 容 版 块 。 
如 中 国人 民 大 学 首页 就 属于 这 种 布局 ,如 图 5-2 所 示 。 
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学 费 、 寅 要 通知 
让 入 
有关" 村 而 美国 人 的 历史 
《CAfican American History ) "的 
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人 中 国人 民 大 学 校长 纪 王 成 荣 效法 国教 育 榨 攀 动 宣 军训 动 位 涡 合 [视频 ] 


3 中 国人 民 大 学 第 四 抽 国 情 知 识 信 赛车 下 由 三 投 多 | 
A 游 沫 二 人 大 学 子 “永远 跨 党 去 ”主题 展示 活动 学 行 刷 频 ] 
Ly ，。 状 心 溢 力 漳 基 飞 科学 帮 展 语 新 蓝 中 国人 民 大 学 2011 年 院 长 会 议 召 
开 
。 首 批 精品 视频 公开 课 现 场 录 可 
像 。 欢 迎风 学 仆 积极 参与 he :年 本 科 招 生 录取 工作 及 2011 届 毕业 生 款 业 添 站 


) Cr Ee” 
讲座 : 财务 全 种 系 一 “第 一 必 中 法 廊 化 所 产 法 研讨 会 ”在 中 国人 民 大 学 法 学 院 避 重 召 开 


Determinants of Corporate Cash 
rary rt 丙 字 院 冯 导 国手 商务 业 充 二 扫 池 与 二 并 研 计 研 四 开 


。 中 国人 民 大 学 灿 观 数 项 与 实证 方法 研究 中 心 成 立 国际 一 流 名 岳 齐 于 
EE 


电 宝 成 校长 下 电视 轨 算 各 三 立波 土 祷 校友 会 
。 中 国人 民 大 学 “北京 室内 乐团 " 举办 宣 内 乐 者 需 音乐 会 程 天 权 书 记 
E23 


NS 
， 中国 人民 大 学 召开 弟 作 次 挂职 和 部 座 淡 会 中 国 油 全 与 教 锯 中 心 | 


* 中 国人 民 大 学 党 委 理 论 中 心 虞 召开 扩大 会 议 认真 学 习 册 衬 涛 各 书记 
七 一 ”重要 讲话 精神 


ey 公 2 制 友 化 品牌 化 ”中 国人 民 大 学 共生 2011 年 导 央 学校 开 学 


:中国 
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图 5-2 “中 国人 民 大 学 "首页 
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这 种 结构 布局 是 互联 网 上 最 常见 的 布局 ,其 优点 是 : 页 面 结构 清晰 直观 ,平衡 均衡 和 
主 次 分 明 。 缺 点 是 版 次 过 于 呆板 ,僵化 ,往往 给 人 一 种 “单调 乏味 ”的 感觉 。 因 此 ,采用 这 种 
布局 结构 时 ,必须 在 设计 过 程 中 更 加 注重 色彩 的 搭配 和 细节 的 处 理 ,调节 页 面 的 整体 韵律 ， 
弥补 它 的 不 足 。 

2.“ 匡 ” 字 型 布局 

“ 匡 ” 字 型 布局 (又 叫 “ 拐 角 型 "布局 ) 是 把 “ 同 ” 字 型 布局 右边 的 内 容 移 到 底部 而 成 ,它们 
的 结构 特点 和 优 缺 点 也 大 体 相同 。 如 北京 交通 大 学 首页 就 属于 这 种 布局 ,如 图 5-3 所 示 。 


北京 大 学 Vindovs Tateraet 
ET [2 


四 目 四 国 给 用 时 立 Wmx 四 辐 - 总 国 - 口 


I Tr 


人 十 国 不 节 记 出 序 全 国 高 枚 学 生 “ 夭 运 中 党 走 " 主题 和 其 福 
会 实 葡 医 动 所 动人 式 ( 图 ) [2011-6-29] 

人 【 件 乱 总 于 析 】 我 们 的 行程 ( 姐 图 ) [2011-6-22] 

人 国内 重点 尖 什 报 道中 共 中 央 政治 局 委员、 国务 委员 刘卫东 
视 训 我 校 情况 [2011-6-22] 

CC 【 件 验 京 沪 大 惧 】 快讯 : 学 以 信和 二 全 程 直 排 我 术 师 生 
体 下 京 沪 页 术 活 动 《 图 ) [2011-6-22] 


书记 校长 信箱 
委 后 


FE 


图 5-3 “北京 交通 大 学 ”首页 


3.“ 昌 ” 字 型 布局 

“ 昌 ? 字 型 布局 的 特点 是 把 页 面 分 为 上 下 两 大 块 ,其 中 每 一 块 都 具有 同 字 型 结构 的 特点 。 
这 种 结构 在 设计 技术 上 采用 上 下 两 个 表格 进行 页 面 元 素 的 定位 ,两 个 表格 之 间 往 往 插 入 条 
幅 广 告 。 这 种 布局 能 够 容纳 大 量 信息 ,目前 各 大 型 门户 网 站 的 二 级 模块 通常 都 是 采用 “ 吕 ” 
字 型 的 布局 ,如 “新 浪 体育 ”“ 网 易 新 闻 ” 和 “搜狐 财经 "等 网 页 ,如 图 5-4 所 示 。 

4. 自由 式 布 局 

自由 式 布局 打破 了 上 述 结构 的 “ 规 规矩 矩 ", 尽 情 挥 酒 。 页 面 布局 就 像 一 张 宣传 海报 , 极 
具 创 意 。 这 种 页 面 常 常 以 一 幅 精美 的 图 片 作为 设计 中 心 ,导航 栏 则 作为 次 要 的 设计 元 素 , 自 
由 摆布 ,起 到 点 缀 、 修 饰 和 均衡 的 作用 。 一 些 时 尚 网 站 常常 采用 这 种 布局 ,如 艺术 设计 、 时 
装 服饰 和 化 妆 品 等 站 点 。 这 种 布局 的 优点 是 漂亮 、 现 代 、 轻 松 和 明快 , 极 具 美感 ,给 人 以 
美的 享受 。 如 中 国 地 质 大 学 和 中 央 音 乐 学 院 网 站 首页 就 属于 这 种 布局 ,如 图 5-5 和 图 5-6 
所 示 。 
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图 55 “中 国 地 质 大 学 ”首页 


57 


58 


网 站 建设 与 管理 基础 及 实 训 (ASP 版 ) 


入 
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图 5-6 “中 央 音 乐 学 院 "首页 


知识 3 页 面 布局 设计 

了 解 了 网 页 的 基本 组 成 和 常见 的 页 面 布 局 类 型 之 后 ,就 可 以 考虑 自己 的 页 面 布 局 设计 
了 。 一 般 来 说 ,页 面 布 局 设计 需要 经 过 下 面 几 个 基本 步骤 。 

1. 构思 构图 

在 真正 开始 页 面 布局 设计 之 前 ,都 要 对 页 面 的 整体 布局 进行 认真 的 构思 。 在 这 个 阶段 ， 
可 以 借鉴 他 人 的 布局 经 验 , 参 考 他 人 的 布局 结构 ,吸取 别人 的 精华 ,融入 到 自己 的 整体 构思 
中 。 要 充分 发 挥 艺 术 想象 力 ,锐意 创新 .大胆 突 破 ,结合 现 有 的 网 页 素材 考虑 ,进行 整合 创 
作 。 构 思 结 果 一 定 要 有 自己 的 独特 创意 ,并 要 考虑 技术 实现 的 可 行 性 。 有 时 候 , 尽 管 构思 巧 
妙 , 见 解 独到 ,但 用 现在 的 计算 机 技术 和 网 络 技术 却 不 能 实现 ,创意 也 就 变 成 了 空想 。 

2. 绘制 草图 

网 页 布局 设计 就 像 写 文 章 一 样 ,要 事先 打 草 稿 一 一 绘制 草图 。 新 建 页 面 就 像 一 张 白 纸 ， 
没有 任何 表格 和 框架 ,没有 约定 俗 成 的 条 条 框框 的 约束 ,可 以 尽 可 能 地 发 挥 想 象 力 ,将 想到 
的 “景象 " 画 上 。 绘 制 草图 就 是 把 头脑 中 构思 的 页 面 布局 轮廓 具体 化 的 过 程 ,可 以 在 纸 上 绘 
画 , 也 可 以 用 软件 在 计算 机 上 绘制 。 在 头脑 中 构思 时 ,没有 受到 空间 和 技术 因素 的 限制 , 思 
维 的 "翅膀 ?可 能 飞 得 很 远 ,但 当 在 纸 上 或 计算 机 上 实现 时 却 可 能 发 现 , 有 些 想法 是 无 法 实现 
的 ,或 者 发 现 有 些 地 方 不 太 合理 。 因 此 ,在 绘制 过 程 中 必须 对 头脑 中 的 “蓝图 ”做 必要 的 修 
正 。 绘 制 草图 属于 创造 阶段 ,不 讲究 细腻 工整 ,不 必 考 虑 细节 功能 ,只 要 以 粗 陋 的 线条 勾画 
出 创意 的 轮廓 即 可 。 可 以 尽 可 能 多 画 几 张 , 最 后 选 定 一 个 满意 的 方案 作为 继续 创作 的 脚本 。 
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如 图 5-7 所 示 就 是 一 幅 页 面 布 局 手绘 草图 。 

3. 草图 细 化 和 方案 确定 

草图 细 化 和 方案 确定 就 是 在 绘制 出 来 的 轮廓 草图 上 ,具体 摆布 页 面 元 素 ,包括 网 站 的 站 
标 、. 导航 栏 .栏目 标题 .广告 ,图片 和 搜索 引擎 等 。 按 照 平 面 设 计 的 规律 做 出 平面 的 基本 样 
式 。 这 一 步 可 以 用 一 些 图 像 处 理 软件 (如 Photoshop、PageMaker 和 lllustrator 等 ) 在 计算 
机 上 完成 。 在 具体 布局 页 面 元 素 时 ,可 以 借鉴 平面 构图 的 一 些 基 本 原则 ,如 平衡 .呼应 ` 对 比 
和 玻 密 等 。 这 个 阶段 的 设计 结果 仍然 是 草图 ,但 是 已 经 是 一 个 布局 完善 的 设计 方案 了 ,除了 
文字 内 容 之 外 ,其 他 所 有 内 容 应 该 基本 接近 将 来 网 页 的 实际 效果 。 这 个 方案 供 客户 和 技术 
开发 人 员 讨论 确定 最 后 方案 时 参考 。 如 图 5-8 所 示 就 是 一 幅 页 面 布局 细 化 草图 。 


evP 芋 其 网 上 商工 Logo 。 易 购 商 城 
| ti 接 链接 3 链接 4 | 


(链接 4 )... 链接 2 接 


图 5-7 网 页 布局 手绘 草图 图 5-8 网 页 布局 细 化 草图 


4. 量化 描述 

量化 描述 就 是 确定 各 种 页 面 元 素 的 具体 尺寸 。 主 要 包括 下 面 几 个 方面 。 

(1) 网 页 的 外 形 尺 寸 。 网 页 的 宽度 受 计 算 机 显示 器 的 大 小 和 分 辩 率 制约 。 在 浏览 网 页 
时 ,人 们 能 够 看 到 页 面 宽度 只 是 显示 屏 的 一 部 分 ,因为 浏览 器 的 菜单 栏 .工具 栏 .边框 和 滚动 
条 要 占 去 一 部 分 的 屏幕 空间 。 现 阶段 ,用 户 的 显示 器 一 般 都 在 19 英寸 及 以 上 ,分辩 率 至 少 
设置 为 1024X768。 这 样 , 显 示 屏 的 最 小 宽度 就 是 1024 像素 。 但 是 , 当 使 用 浏览 器 浏览 网 
页 时 ,浏览 器 窗口 右边 的 滚动 条 一 般 占据 20 像素 ,所 以 ,网 页 的 安全 宽度 至 少 应 为 1000 像 
素 。 而 且 随 着 以 后 显示 器 屏幕 的 尺寸 不 断 加 大 ,这 个 宽度 还 可 以 再 增加 。 

页 面 的 高 度 可 以 不 受 768 像素 的 限制 ,可 根据 网 页 内 容 确定 ,但 一 般 不 要 超过 三 屏 ( 约 
2300 像素 )。 太 长 了 , 拖 动 垂直 滚动 条 观看 也 是 不 方便 的 。 

(2) 图 形 图 像 的 尺寸 。 图 形 图 像 的 尺寸 应 该 根据 具体 的 布局 要 求 确定 ,也 是 以 像素 为 
单位 。 在 确定 大 小 的 同时 ,也 应 该 确定 它们 在 页 面 中 的 相对 位 置 。 

(3) 字体 大 小 。 指 定 网 页 文本 .如 标题 文字 、 段 落 文字 的 大 小 。 图 像 化 的 标题 文字 应 该 
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写 

作为 图 像 处 理 。 

(4) 色彩 代码 。 一 页 网 页 往往 采用 多 种 颜色 搭配 ,包括 标准 色 ,. 背 景色、 文字 颜色 等 。 
这 些 元 素 的 颜色 应 该 用 RGB 颜色 值 或 HTML 颜色 代码 (十 六 进 制 颜色 代码 ) 标 明 。 

(5) 网 页 的 文件 大 小 。 初 步 估算 网 页 文件 的 大 小 ,一 般 应 该 控制 在 50KB 左右 ,网 页 文 
件 过 大 会 影响 下 载 速度 。 

5. 方案 实施 

根据 上 述 步 又 确定 的 最 终 方案 用 网 页 编辑 软件 (如 Dreamweaver 或 FrontPage) 和 图 像 
处 理 软件 (如 Photoshop 和 Fireworks) 进 行 布局 设计 。 


知识 4 网 页 布局 方法 


1. 使 用 表格 布局 网 页 

表格 布局 具有 简单 高 效 \ 易 学 易 用 的 特点 。 很 多 版 面 非常 复杂 的 页 面 往往 都 是 用 表格 
来 控制 的 。 采 用 表格 进行 页 面 布局 ,可 以 简洁 明了 和 高 效 快捷 地 将 文本 、 图 片 和 多 媒体 对 象 
等 页 面 元 素 有 序 地 显示 在 页 面 上 ,从 而 设计 出 版 式 美观 的 页 面 效 果 。 

表格 可 以 把 页 面 的 某 个 空间 划分 为 若干 行 和 列 ,其 中 的 每 一 “ 格 ” 称 为 表格 单元 。 在 网 
页 设计 中 ,表格 既 可 存放 表格 化 的 数据 ,也 是 重要 的 页 面 布局 工具 ,可 用 来 定位 页 面 元 素 ,如 
设计 页 面 分 栏 ,定位 页 面 上 的 文本 和 图 像 等 。 表 格 和 表格 单元 格 都 拥有 多 种 属性 ,如 边框 、 
大 小 .颜色 .背景 图 像 和 背景 颜色 等 ,通过 设置 表格 和 单元 格 的 属性 ,可 以 获得 更 好 的 页 面 排 
版 效果 。 

下 面 以 一 个 简单 的 例子 来 讲述 表格 布局 ,详细 步骤 如 下 。 

(1) 新 建 一 个 网 页 , 往 网 页 中 插入 一 个 4 行 两 列 宽度 为 900 像素 的 表格 。 将 表格 的 边 
框 粗细 、 单 元 格 边 距 和 间距 都 设置 为 0, 如 图 5-9 所 示 。 


图 5-9 “表格 ?对话 框 


(2) 设置 表格 居中 对 齐 ,将 表格 左边 一 列 的 宽度 设置 为 190 个 像素 。 同 时 合并 表格 的 
第 一 行 . 第 二 行 和 第 四 行 。 此 时 的 表格 如 图 5-10 所 示 。 
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图 5-10 设置 属性 后 的 表格 


(3) 在 表格 的 第 一 行 中 插入 事先 准备 好 的 站 标 和 页 眉 , 如 图 5-11 所 示 。 
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图 5-11 插入 “页 由 "后 的 表格 
(4) 在 表格 的 第 二 行 可 以 插入 一 个 一 行 多 列 居中 的 嵌入 表格 来 放置 导航 链接 。 设 置 导 
航 栏 后 的 表格 如 图 5-12 所 示 。 


兴 24 恕 名 mas 蕊 afq 心 瑟 a 和 17 全 站 人 
省 钱 又 放心 


图 5-12 插入 “导航 栏 " 后 的 表格 


(5) 在 表格 的 第 三 行 的 第 一 列 可 以 插入 一 个 多 行 一 列 的 嵌入 表格 ,放置 部 分 内 容 导航 、 
注册 和 搜索 等 模块 ,如 图 5-13 所 示 。 
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图 5-13 插入 左 侧 模块 后 的 表格 


(6) 同样 在 表格 的 第 三 行 第 二 列 和 第 四 行 中 插入 相应 的 内 容 。 插 入 完 所 有 内 容 后 在 浏 
览 器 中 预览 ,效果 如 图 5-14 所 示 。 

提示 : 这 里 为 了 简单 起 见 , 都 用 事先 准备 好 的 图 片 代 替 单 元 格 内 容 插 入 第 2.3、4 行 中 
相应 的 单元 格 。 

2. 使 用 层 布 局 网 页 

在 设计 网 页 时 ,除了 使 用 表格 对 页 面 元 素 进行 定位 之 外 ,还 可 以 使 用 层 进行 页 面 元 素 的 
定位 。 使 用 层 可 以 以 像素 为 单位 精确 定位 页 面 元 素 。 可 以 把 层 放置 在 页 面 的 任意 位 置 。 把 
页 面 元 素 放 和 人 层 中 ,除了 可 以 对 页 面 元 素 进 行 定 位 外 ,还 可 以 控制 元 素 的 显示 和 隐藏 以 及 显 
示 顺 序 。 

层 可 以 包含 文本 图像、 表单 .动画 等 页 面 元 素 。 层 内 甚至 还 可 以 包含 其 他 层 , 即 层 可 以 
嵌 套 。 在 HTML 文档 的 正文 部 分 可 以 放置 的 元 素 都 可 以 放 入 层 中 。 这 样 通过 移动 层 就 可 
以 确定 元 素 在 页 面 中 的 位 置 。 

通常 要 实现 比较 精确 和 自 适应 的 层 布 局 需要 设置 层 的 样式 , 即 用 CSS 控制 层 的 位 置 。 
CSS 十 DIV 布局 与 传统 表格 布局 最 大 的 区 别 在 于 .传统 表格 布局 的 定位 都 是 基于 表格 ,通过 
表格 的 间距 或 者 使 用 透明 的 gif 图 片 来 填充 布局 板块 间 的 间距 ,这 样 布局 的 网 页 中 表格 会 
生成 大 量 难以 阅读 和 维护 的 代码 ; 而 现在 CSS 十 DIV 布局 采用 DIV 来 定位 ,通过 DIV 的 
border( 边 框 ) .padding( 填 充 ) .margin( 边 界 ) 和 float( 浮 动 ) 等 属性 来 控制 版 块 的 间距 ,具体 
实施 是 通过 创建 DIV 标签 并 对 其 应 用 CSS 定位 及 浮动 属性 来 实现 。 
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图 5-14 完整 表格 预览 效果 


宽度 固定 且 居 中 的 布局 是 网 络 中 最 常用 的 布局 方式 之 一 ,在 传统 的 表格 布局 方式 中 ,使 
用 表格 的 居中 对 齐 属性 可 以 实现 布局 居中 。 当 然 使 用 CSS 方法 也 可 以 实现 布局 居中 。 首 
先 在 页 面 中 插入 div 标签 ,将 网 页 所 有 内 容 用 一 对 二 div 二 二 /div 二 标签 包 裴 起 来 ,指定 该 
div 的 id 为 container, 代 码 如 下 。 

<body> 


<div id= "container"></div> 
</body> 


div 在 默认 状态 下 ,宽度 将 占据 整 行 的 空间 ,也 可 以 直接 设置 布局 对 象 的 宽度 属性 
width 来 设置 固定 宽度 。 先 设置 二 body 二 标签 的 属性 text-align:center 来 控制 页 面 所 有 元 
素 都 居中 对 齐 , 块 #container 属于 页 面 body 的 一 部 分 ,自然 也 居中 对 齐 。 在 #container 属 
性 中 设置 margin:0 auto, 其 完整 写法 为 margin:0 auto 0 auto, 作 用 是 使 并 container 块 与 页 
面 的 上 下 边 距 为 0. 左右 自动 调整 。 但 #container 内 的 所 有 内 容 应 该 恢复 左 对 齐 设置 ,所 以 
需要 通过 设置 fcontainer 块 的 textralign:left 来 覆盖 一 body 盖 中 设置 的 对 齐 方式 。 整 个 过 
程 的 思路 就 是 这 样 ,CSS 代码 如 下 。 
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body{ 
text ~ align: center; 
} 
#container{ 
position:relative; 
background — color: #FF0000; 
margin — top: Opx; 


margin — right:auto; 
margin 一 bottom: Opx; 
margin— left:auto; 
height:796px; 
width:900px; 
text ~- align:left; 

} 


通过 上 面 的 CSS 就 可 将 id 为 *container” 的 层 居中 ,如 图 5-15 所 示 。 


文件 中 编 旬 四 查看 RD 丰县 9D 有 Ea 
加- 加 - 国 国 名 万 是 丙 wmx 四 全 -总 国 - 口 


久生 加 国 http://lyealhestwobsite_wpp/chapter05/eonthnjal Mal 加 9 个 p 扫 -四 由 在 


图 5-15 通过 CSS 实现 层 居中 


float 属性 是 DIV 布局 中 经 常 要 设置 的 一 个 属性 。 志 div 之 是 一 个 块 级 元 素 , 在 水 平方 
向 上 会 自动 伸展 ,直到 包含 它 的 元 素 的 边界 ; 而 在 垂直 方向 和 其 他 元 素 依次 排列 且 能 并 排 。 
但 当 使 用 了 float 属性 后 , 块 级 元 素 的 表现 就 会 有 所 不 同 。float 属性 可 以 设置 的 值 为 left、 
right ,inherit 及 默认 值 none。 如 果 将 float 属性 的 值 设 置 为 left 或 right, 元素 就 会 向 其 父 元 
素 的 左 侧 或 右 侧 靠 紧 ,同时 元 素 的 宽度 会 根据 其 内 容 伸 展 或 收缩 。 本 章 后 续 内 容 中 会 在 模 
拟 制作 任务 中 详细 讲解 如 何 用 层 布 局 一 个 网 页 ,在 此 不 做 展开 。 

3. 使 用 框架 布局 网 页 

框架 在 网 页 设计 中 的 应 用 是 比较 广泛 的 。 在 浏览 网 页 的 时 候 , 常 常会 遇 到 这 样 的 一 种 
导航 结构 , 单 击 页 面 上 侧 链接 ,链接 的 目标 出 现在 下 侧 ; 或 者 单 击 页 面 左 侧 的 超级 链接 , 链 
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接 的 目标 出 现在 右 侧 。 这 就 是 框架 技术 中 最 常用 的 导航 窗口 。 
框架 页 面 是 把 浏览 器 窗口 划分 为 若干 个 子 窗口 ,这 些 子 窗口 称 为 框架 。 一 个 框架 显示 


一 个 网 页 文件 ,但 整个 框架 集 却 存在 于 同一 个 浏览 器 窗口 中 。 框 架 页 面 可 以 把 不 同类 别 的 
信息 显示 在 不 同 的 框架 中 ,有 利于 分 类 管理 和 控制 。 


下 面 讲述 如 何 用 框架 布局 一 个 简单 的 首页 ,详细 步骤 如 下 。 


(1) 创建 一 个 普通 的 静态 网 页 ,在 创建 框架 集 前 选择 * 查 看 ”|* 可 视 化 助理 "|* 框 架 边 
框 ”, 使 框架 边框 在 文档 窗口 中 可 见 , 如 图 5-16 所 示 。 


Dw | sw | ES © swe 
EE 
nttierr x 
| -更 | 折 分 [ 识 计 ] 3 人 网， 司 4。 实时 滴 图 六 本 状 . 吧 、C 。 标题 : 无 村 是 文档 区 村 
[Ua 国 . 
[ody, NW A 100x% ~ 880 x 211v LK/ 1 秒 Wnicode 0TF-6) 


图 5-16 显示 框架 边框 


(2) 从 窗口 重 直 或 水 平 边框 往 页 面 中 间 拖 忠 一 条 框架 边框 ,可 以 垂直 或 水 平分 割 文档 
窗口 (或 已 有 的 框架 ); 从 文档 窗口 一 个 角 上 拖 忠 框架 边框 ,可 以 把 文档 (或 已 有 的 框架 ) 划 
分 为 4 个 框架 。 这 里 拖 忠 两 个 水 平 框架 边框 ,将 整个 页 面 分 成 上 中 下 三 个 框架 ,如 图 5-17 
所 示 。 

Dw sh ”| Oc 区 硬 仿 潮 
文件 四 ”编辑 ( 术 。 查看 ( 另 ” 插 入 加。 修改 ”格式 (0@) 命令 人 E) 外 点 (5) 富 口 咖 帮助 GD 


图 5-17 将 整个 页 面 分 为 上 中 下 三 个 框架 页 
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(3) 选择 菜单 “窗口 "I" 框架" 命令 ,快捷 键 为 Shift 十 F12。 打 开 “ 框 架 "面板 ,在 “框架 ” 


面板 中 选择 中 间 的 框架 ,如 图 5-18 所 示 。 
Dw "| 四 OQ sw 蕊 到 区 晤 | 


文件 四 “编辑 四 查看 (W) 轿 入 (DD 修 汉 加 格式 四) 命令 (CD 站点)” 富 口 中 帮助 GD 


dt 
| 代码 | 拆 分 【设计 | 实时 代码 “后 学 SH 视图 检查， 国 . 吧 、 富 标题 : 无 慰 gX 档 
| AM: 

| 


eset) Er me) 0x -672 x 281v 1 K /1 Unicode OTF-6) 


图 5-18 选择 中 间 的 框架 


(4) 此 时 从 左 侧 拖 忠 一 个 框架 边框 即 可 将 中 间 的 框架 分 为 两 列 ( 即 两 个 子 框架 ) ,如 
图 5-19 所 示 。 如 果 没 有 选择 中 间 框 架 就 拖 忠 左 侧 框架 边框 , 则 会 将 现 有 的 上 中 下 三 个 框架 
都 分 为 两 列 , 如 图 5-20 所 示 。 


Dw En * | ee © ue 
文件 加 ”总 罚 () 查看) 轿 入 (DD 修 到 虽 格式 (加 ” 命 信 吕 ”站 点 人 ”窗口 OD ” 才 助 仙 
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图 5-19 将 中 间 的 框架 分 为 两 列 


(5) 本 例 选 择 图 5-19 的 分 法 ,将 中 间 框 架 分 为 两 列 。 选 择 菜单 “文件 ”1“ 保 存 全 部 ” 命 
令 保存 整个 框架 集 。 在 各 个 框架 中 单 击 ,选择 菜单 “文件 ”1“ 保 存 框架 "或 “框架 另存 为 "命令 
保存 框架 。 本 例 共 保存 5 个 文件 ,其 中 包括 一 个 框架 集 文件 和 4 个 框架 文件 。 

(6) 将 相应 的 页 面 元 素 加 入 各 个 框架 中 ,在 浏览 器 中 预览 的 效果 如 图 5-21 所 示 。 
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图 5-20 将 上 中 下 三 个 框架 分 为 两 列 


当 框架 布局 - indews Interaot 
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图 5-21 用 框架 布局 网 页 


知识 5 页 面 排版 布局 趋势 (Web 2.0) 


Web 2.0 是 一 个 新 兴 的 网 站 设计 技术 概念 。Web 2. 0 的 网 页 一 般 使 用 CSS 十 DIV 实现 
网 页 的 布局 。 使 用 AJAX 和 XML 与 服务 器 进行 数据 交互 。 

Web 2.0 网 页 的 布局 更 加 强调 网 站 的 专业 性 与 网 站 的 交互 性 。 网 站 可 以 体现 出 强大 的 
功能 ,网 页 在 简单 的 布局 中 可 以 体现 出 强大 的 功能 。 例如,“ 谷歌 "和 “百度 "就 是 Web 2.0 
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网 站 优秀 布局 方式 的 代表 。 在 一 个 简单 的 网 页 输入 框 中 可 以 查询 到 所 需要 的 知识 。 同 时 ， 
在 查询 结果 的 网 页 中 ,可 以 高 效 地 布局 出 用 户 所 需要 的 内 容 。 

如 图 5-22 和 图 5-23 所 示 是 百度 网 站 的 首页 和 搜索 结果 页 面 ,这 种 页 面 布 局 是 Web 2.0 
网 页 布局 的 代表 。 网 页 的 色彩 和 布局 非常 简洁 ,但 可 以 体现 出 网 页 的 强大 功能 和 丰富 的 网 
站 内 容 。 
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图 5-22 百度 简约 的 布局 


卫 百度 搜索 _ 网 页 布局 座 计 -Vindows Internet zxplerer 
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站 设计 公司 设计 公司 ? 力 六 > www 178365 net 推 总 捷 推广 训 法 
力 洋 .5A 级 西安 间 站 设计 公司 ,资深 是 问 ,专业 识 计 师 一 对 一 服务 ,个 性 化 设计 ,029-88855304 


多 美 歌 网 页 设计 高 质 低 价 热 . 
， 真诚 源 自 多 美 王 建站 ,多 年 来 定制 网 站 建 计 
站 设计 -2011 络 让 您 满意 ~ www qingqinsof com 强大 的 技术 实力 ,贴心 的 专业 服务 选择 


西安 网站 设计 ,2011 年 青 素 网 络 提供 企业 网 站 建设 委 矢 .1000-2000 元 不 等 .西安 站 站 设计 www dobygo com 


网 页 设计 与 网 站 建设 推广 来 百度 推广 官方 网 站 ebaidu com 西安 网 页 设计 比 来 比 去 还 是 找 . 
百度 推广 放 仿 进行 殉 页 设计 与 网站 建设 推广 ,用 少 恒 投入 就 可 以 给 企业 适 玉 大 量 洪 在 客户 ! 西安 问 页 设计 找 朋 讯 .陕西 人 者 知道 呐 安 F 


计 我 们 有 三 大 法 宝 ; 质 量 高 ,价格 你 .服务 好 

四 页 设计 基础 -Div+CSS 布 局 入 门 教程 -一 ， 页 面 布局 与 规划 -太平 洋 电 .。 www xayngxun com 

关于 如 何 使 用 DIV+CSS 进 行 网 页 布局 设计 入 门 教程 下 面 我 们 就 开始 一 步 一 步 使 用 DIV+CSS 

进行 网 页 布局 设计 吧 。 所 有 的 设计 第 一 步 就 是 构 于 ， 构 轩 好 了 ， 一 般 坟 说 还 和 要 用 88 元 网 页 设计 就 会 建站 

www.pconline.com.cn/pcedu/sj/wz/html/0703 2011.6-17 - 百度 快照 88 元 起 . 288 元 网 页 设计 域名 邮 精 全 包括 

客服 1 对 1 指导 .支持 FTP 随 意 修改 模版 

网 页 布局 设计 基础 天极 网 ww 8845 cn 

网 页 布局 的 方法 有 丙种， 第 一 种 为 纸 上 布 局 :第 二 种 为 软件 布局 。 下 面 分 别 加 以 介绍 。 1 纸 上 

布局 法 许多 网 页 制作 者 不 喜欢 先 画 出 页 面 布局 的 草图 ， 而 是 直接 在 殉 页 度 计 .。 网 际 具有 8 年 网 页 设计 经 验 , 容 、 
AEAAK siml 9N11.5.19 - 严 阳 他 时 580 元 就 可 以 结 委 定制 四 如 全 服务- 信 5 
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图 5-23 百度 强大 的 搜索 功能 
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模拟 制作 任务 


任务 ”使 用 CSS+DIV 布局 一 个 网 页 


任务 背景 

有 时 需要 在 网 页 布局 之 后 还 能 灵活 调整 各 模块 的 相对 位 置 ,使 用 CSS 十 DIV 布局 网 页 
可 轻松 达到 这 一 要 求 。 

任务 要 求 

使 用 CSS 二 DIV 布局 一 个 网 页 ,要 求 网 页 布局 后 各 模块 的 相对 位 置 可 以 灵活 调整 。 

【技术 要 领 】 如 何 用 CSS 控制 层 的 位 置 。 

【解决 问题 】 CSS 十 DIV 布局 网 页 。 

【应 用 领域 】 网 页 布局 。 

任务 分 析 

本 任务 需要 设计 者 对 CSS 相关 属性 较为 熟悉 ,能 通过 设置 层 (DIV) 的 样式 来 达到 灵活 

重点 和 难点 

CSS 相关 属性 的 用 法 。 

操作 步骤 

(1) 新 建 一 个 网 页 ,切换 到 代码 视图 ,在 二 body 之 一 /body 标 签 中 加 入 如 下 代码 。 


<div id = "container"> 
< div id = "header">< img src = "header. jpg" /></div> 
<div id= "links">< img src= "links. jpg" /></div> 
<div id= "left">< img src = "left. jpg" /></div> 
<div id= "main">< img src = "main. jpg" /></div> 
<div id= "footer">< img src = "footer. jpg" /></div> 
</div> 


(2) 在 二 head 记 二 /head 二 标签 中 加 入 如 下 CSS 代码 用 来 控制 各 DIV 的 显示 。 


< style type = "text/css"> 

二 = 

body{ 
text ~ align: center; 

} 

#container{ 
position: relative; 
background - color: #00FF00; 
margin — top:0px; 
margin ~ right:auto; 
margin — bottom: 0px; 
margin— left:auto; 
height:776px; 
width:900px; 
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text 一 align: left; 

} 

#header{ 
position: relative; 
background — color: #FF0000; 
height:113px; 
width:900px; 
text 一 align: left; 

} 

#1inks{ 
position: relative; 
background - color: #FF9900; 
height:29px; 
width:900px; 
text 一 align: left; 

} 

#1left{ 
position: relative; 
background - color: #FFFF66; 
height:587px; 
width:216px; 
text 一 align: left; 
float:left; 

} 

#main{ 
position: relative; 
background - color: #00FFFF; 
height :587px; 
width:684px; 
text — align: left; 
float :right; 

} 

#footer{ 
position: relative; 
background - color: #FFOOFF; 
height:47px; 
width:900px; 
text 一 align: left; 
float:left; 

. 

ca 

</style> 


(3) 在 网 页 中 预览 ,如 图 5-24 所 示 。 

代码 说 明 : 

(1) 代码 中 共 包 含 6 个 DIV 标签 ,分 别 代 表 6 个 层 。 其 中 最 外 层 的 id 为 container 的 
DIV 起 到 一 个 容器 的 作用 ,用 于 容纳 其 他 5 个 层 。 
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文件 四 编 绒 世 吉 看 如 收 送 争 工具 上 天 助 0 
四 和- 四- 国 国手 朋 各 责 smx 回合 -对 本 -过 组 入 


洁 引 | 图 http:/1lecalhostyvehsite_aspychapter05y cenghajn2_htnl 


号 24 如 ED 


图 5-24 CSS 十 DIV 布局 效果 


(2) 选择 器 body 和 #container 的 样式 用 于 将 最 外 层 id 为 container 的 DIV( 容 器 层 ) 水 
平 居中 显示 。 

(3) 其 他 几 个 选择 器 样式 如 并 header, #links, #left, #main 和 #footer 分 别 用 来 控制 容 
器 内 5 个 层 的 显示 。 

(4) 选择 器 #left 和 #main 中 有 一 个 重要 的 CSS 属性 float。 其 中 ,在 选择 器 #left 中 设 
置 为 float:left; 而 选择 器 #main 中 设置 为 float:right。 该 属性 设 定 了 id 为 left 的 层 居 左 显 
示 ,id 为 main 的 层 则 居 右 显示 。 在 网 页 中 预览 如 图 5-24 所 示 。 

(5) 如 果 想 将 id 为 left 和 main 的 层 交换 位 置 .只 需要 在 选择 器 #left 中 设置 float: 
right; 同时 在 选择 器 #main 中 设置 float:left 即 可 。 在 网 页 中 的 预览 效果 如 图 5-25 所 示 。 
从 图 5-25 可 以 看 出 .使 用 CSS 十 DIV 布局 的 网 页 ,要 调整 各 模块 之 间 的 相对 位 置 是 很 简 
单 的 。 
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图 5-25 调整 后 的 CSS 十 DIV 布局 效果 


职业 技能 知识 点 考核 


1. 填空 题 

(1) 一 般 的 网 页 都 包含 » 、 、 、 和 
等 部 分 。 

(2) 常见 的 网 页 结构 类 型 有 、 、 和 

(3) 常见 的 网 页 布局 方法 有 、 和 

2. 简 答 题 

简 述 页 面 布局 设计 需要 经 过 的 几 个 基本 步骤 。 


网 站 页 面 设计 


在 网 站 的 制作 之 前 需要 对 网 站 进行 总 体 设 计 , 这 个 设计 包括 对 网 站 外 观 页 面 的 设计 。 
网 站 的 外 观 页 面 是 呈现 给 用 户 的 第 一 信息 ,也 是 最 直观 的 信息 ,是 网 站 的 重要 组 成 部 分 。 网 
站 页 面 的 设计 可 以 是 局 部 设计 ,也 可 以 使 用 Photoshop 进行 整体 设计 ,通过 切片 工具 存储 转 
换 成 网 页 文件 。 本 模块 以 “ 易 购 商城 "为 具体 案例 ,详细 讲述 了 在 Photoshop 中 设计 网 站 页 
面 效果 图 的 步骤 ,并 最 终 将 整个 页 面 效 果 图 切片 生成 网 页 文件 。 

能 力 目标 

1. 能 独立 设计 网 站 的 主页 面 和 子 页 面 

2. 能 熟练 地 运用 Photoshop 工具 对 设计 的 页 面 切片 

3. 能 利用 Photoshop 工具 制作 网 站 中 的 GIF 小 动画 

知识 目标 

1. 网 站 LOGO 的 设计 制作 

2. 网 站 页 面 的 设计 制作 

3. 使 用 Photoshop 切片 的 方法 

4. 使 用 Photoshop 制作 GIF 小 动画 


模拟 制作 任务 
任务 1 网 站 标志 设计 
任务 背景 


网 站 标志 设计 也 称 网 站 LOGO 设计 ,LOGO 是 网 站 的 标志 和 名 片 , 其 他 网 站 链接 本 网 
站 通常 是 通过 网 站 LOGO 链接 。 因 此 LOGO 是 网 站 形象 的 重要 体现 ,具有 重要 的 地 位 和 
作用 。 网 站 的 LOGO 一 般 会 在 网 站 的 各 级 页 面 中 的 固定 位 置 显示 ,因此 ,在 网 站 的 页 面 设 
计 中 ,第 一 个 任务 就 是 要 根据 网 站 的 内 容 和 特色 设计 网 站 LOGO。 

任务 要 求 

(1) 网 站 LOGO 设计 要 简单 明晰 。 

(2) 网 站 LOGO 应 能 够 体现 网 站 的 主题 和 特色 。 

【技术 要 领 】 使 用 Photoshop 中 的 钢笔 工具 绘制 曲线 ; 运用 选区 等 基本 工具 完成 
LOGO 字母 元 素 的 设计 制作 ; 运用 Photoshop 中 的 基本 操作 实现 LOGO 的 整体 调整 。 

【解决 问题 】 网 页 LOGO 的 设计 制作 。 


74 。 网 站 建设 与 管理 基础 及 实 训 (ASP 版 ) » 


【应 用 领域 】 网 页 页 面 设计 。 
效果 图 
网 站 的 整体 效果 图 如 图 6-1 所 示 。 网 站 LOGO 效果 图 如 图 6-2 所 示 。 


加 me 入 hi 本 和 网 庙 馈 


- 易 购 省 钱 又 放心 


白 电 MPw 400FME 。。。 淹 信 各 电 a0cORMD 


“| 
Pe 
3 ee 


过 国 省 MP4 500RMB 。 TOCL 各 电 3920RMB 


图 6-1 网 站 整体 效果 图 


任务 分 析 

“ 易 购 商城 ”是 一 个 商品 销售 网 站 .标志 的 设计 本 着 “ 易 
购 ”" 的 含义 ,采用 图 形 与 文字 相 结 合 的 方式 ,使 用 了 字母 e” 
和 “G” 来 设计 ,以 整个 网 站 的 主 色 调 橙色 作为 基色 来 进行 
设计 。 

“ 易 购 商城 "网 站 LOGO 的 设计 首先 使 用 Photoshop 中 
的 钢笔 工具 绘制 出 装饰 气泡 ,然后 运用 选区 工具 绘制 LOGO 
的 字母 元 素 “e” 和 “G”。 最 后 使 用 文字 工具 加 上 “ 易 购 ” 字 符 ， 
并 调整 整个 LOGO, 保 存 文件 。 

重点 和 难点 

(1) 运用 钢笔 工具 绘制 装饰 气泡 轮廓 ,并 对 其 进行 调整 填充 。 

(2) 使 用 椭圆 选 框 工具 、 单 行 选 框 工具 和 加 减 选 框 工具 完成 “e”" 和 “G” 字 母 元 素 的 制作 。 


图 6-2 网 站 LOGO 效果 图 
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操作 步骤 

1. 新 建文 件 

启动 Photoshop CS4 ,选择 菜单 "文件 "| “新建 ?命令 ,设置 文件 大 小 为 180pxX 100px 
(宽度 XX 高 度 ) ,分 辩 率 为 72 像素 /英寸 (dpi) ,色彩 模式 为 RGB, 背景 为 白色 ,文件 名 称 为 
logo ,如 图 6-3 所 示 。 


山 队 预 设 (Di 


Device Centra(E)... 


图 6-3 “新 建 " 对 话 杠 


2. 使 用 钢笔 工具 制作 气泡 
选择 工具 箱 中 的 钢笔 工具 (如 图 6-4 所 示 ) ,绘制 装饰 气泡 的 轮廓 路 径 ( 如 图 6-5 所 示 )， 


选择 工具 箱 中 钢笔 工具 组 中 的 转换 点 工具 (如 图 6-6 所 示 ), 对 装饰 气泡 的 路 径 控 制 点 进行 
调整 ,使 其 平滑 。 


图 6-5 装饰 气泡 轮廓 路 径 图 6-6 转换 点 工具 


在 logo 的 画布 上 右 击 选择 “建立 选区 ”( 如 图 6-7 所 示 ) , 沿 着 路 径 线 建立 装饰 气泡 选区 。 

通过 “图 层 ” 面 板 右 下 角 的 “创建 新 图 层 " 按 钮 创建 “图 层 1”, 如 图 6-8 所 示 。 选 择 工具 箱 
中 的 渐变 工具 (如 图 6-9 所 示 ) ,设置 渐变 的 两 个 颜色 值 分 别 为 RGB(162,29,89) 和 RGB 
(214,90,118) ,为 装饰 气泡 填充 渐变 颜色 (如 图 6-10 所 示 ) 。 

复制 装饰 气泡 的 “图 层 1” 两 次 (如 图 6-11 所 示 ) ,出现 三 个 如 图 6-10 所 示 的 渐变 气泡 
(如 图 6-12 所 示 )。 按 住 Ctrl 键 单 击 “ 图 层 1 副本 ”选中 “图 层 1 副本 ”的 选区 ,使 用 渐变 填充 
工具 将 “图 层 1 副本 ”的 气泡 填充 成 橙色 渐变 ,用 同样 的 方法 将 “图 层 1 副本 2” 的 气泡 填充 
成 紫色 渐变 ,效果 如 图 6-13 所 示 。 
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pig 
定义 自 定形 状 
[ws | 
寺中 入 
过 对 外 


自由 到 热点 hI 3. 


图 6-7 建立 选区 图 6-8 新建 图 层 


Y 不 迁 明 度 :100% >| 
填充 :100% | 


图 6-9 渐变 工具 图 6-10 ”装饰 气泡 的 填充 图 6-11 三 个 气泡 的 图 层 


A 


泡 变 色 的 效果 


图 6-12 三 个 气泡 的 效果 图 6-13 
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按 住 Ctrl 十 全 快捷 键 自由 变换 三 个 气泡 的 图 层 ,并 使 用 工具 箱 中 的 移动 工具 对 三 个 气 
泡 图 层 的 位 置 进行 调整 ,使 其 产生 如 图 6-14 所 示 的 效果 。 

通过 “图 层 ” 面 板 右 下 角 的 “创建 新 图 层 " 按 钮 创建 “图 层 2”。 

使 用 工具 箱 中 的 椭圆 选区 工具 , 按 住 Shift 键 ,绘制 正 圆 选区 ,使 用 油漆 桶 工具 (如 图 6-15 
所 示 ) 在 “图 层 2" 上 对 正 圆 选 区 填充 橙色 ,使 用 同样 的 方法 在 "图 层 2" 上 填充 一 个 紫色 圆 , 效 
果 如 图 6-16 所 示 。 


也 
也 
[®, MIR 6 
0. " HFMIR 6 和 ”一 
<. 而 
图 6-14 三 个 气泡 变形 的 效果 图 6-15 渐变 工具 图 6-16 装饰 气泡 的 最 终 效果 


3. 用 选 框 工具 绘制 LOGO 字母 元 素 “e” 和 “*G” 

通过 “图 层 ” 面 板 右 下 角 的 “创建 新 图 层 " 按 钮 创建 图 层 3”。 

选择 工具 箱 中 的 椭圆 选 框 工具 , 按 住 Shift 键 在 "图 层 3” 上 绘制 正 圆 选区 ,使 用 油漆 桶 
工具 将 正 圆 选 区 填充 为 RGB(255,130.54) 的 橙色 ,如 图 6-17 所 示 。 

选择 工具 箱 中 的 单行 选 框 工具 (如 图 6-18 所 示 ) ,用 它 来 水 平 删除 “图 层 3” 中 橙色 正 圆 
的 部 分 像素 ,以 产生 类 似 百 叶 窗 的 间隔 圆 球 效果 ,如 图 6-19 和 图 6-20 所 示 。 


图 6-17 橙色 正 圆 填 充 效果 图 6-18 单行 选 框 工具 图 6-19 间隔 像素 删除 效果 图 一 


选择 工具 箱 中 的 椭圆 选 框 工具 ,以 “图 层 3 的 橙色 圆 圆心 为 圆心 绘制 比 橙色 圆 小 的 同 
心 圆 选区 ,如 图 6-21 所 示 。 

选择 工具 箱 中 的 矩形 选 框 工具 ,将 矩形 选 框 工具 的 模式 设置 为 减 选 区 ,如 图 6-22 所 示 。 

用 和 矩形 选 框 的 减 选区 将 “图 层 3 中 的 同心 小 圆 选 区 减 选 下 半圆 ,混合 运算 中 的 选 
效果 如 图 6-23 所 示 。 

混合 运算 后 的 选区 为 半圆 选区 , 按 Delete 键 ,将 “图 层 3” 中 的 相应 半圆 区 域 删除 ,效果 
如 图 6-24 所 示 。 
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6-21 绘制 同心 小 圆 选区 


图 6-20 间隔 像素 删除 效果 图 二 


Ei EEC AT 
6-22 ”选择 矩形 选 框 的 减 选区 图 6-23 ”混合 运算 中 的 选区 效果 图 


图 
用 同样 的 方法 ,使 用 选区 的 混合 运算 将 “图 层 3 的 圆 处 理 成 字母 "e" 的 效果 ,效果 图 如 


图 6-25 所 示 。 
面 


AN 


图 6-24 删除 半圆 的 效果 图 
使 用 选区 和 选区 的 混合 运算 ,绘制 元 素 字 母 "G”, 如 图 6-26 所 示 。 对 字母 *e” 和 字母 


图 6-25 字母 “e" 效 果 图 


“G” 的 大 小 和 位 置 进行 调整 ,效果 如 图 6-27 所 示 。 
而 

"人 ”一 
字母 “G" 效 果 图 图 6-27 调整 后 的 效果 图 


图 6-26 


rt 


4. 用 文字 工具 显示 网 站 名 称 

使 用 工具 箱 中 的 文字 工具 输入 “ 易 购 " 文 字 元 素 , 文 字 设置 的 参数 如 图 6-28 所 示 。 对 
LOGO 中 的 所 有 图 层 的 元 素 大 小 和 位 置 进 行 调整 ,最 终 制作 好 的 LOGO 效果 图 如 图 6-29 
所 示 。 
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图 6-28 “ 易 购 "设置 参数 图 6-29 LOGO 效果 图 

依据 以 上 的 方法 就 实现 了 网 站 LOGO 页 面 的 设计 制作 。 
任务 2 ”网 页 导航 设计 
任务 背景 
网 站 的 导航 是 网 站 的 地 图 ,是 使 用 者 搜索 寻找 信息 的 重要 依据 。 为 网 站 设计 清晰 的 导 
航 是 网 站 设计 的 基本 要 求 。 因 此 ,在 网 站 的 页 面 设计 中 ,第 二 个 任务 就 是 要 规划 网 站 ,将 网 
站 的 信息 分 门 别 类 ,为 网 站 设计 制作 清晰 的 导航 目录 。 

任务 要 求 

(1) 网 站 导航 分 类 清晰 ,方便 使 用 。 

(2) 网 站 导航 能 够 从 用 户 角度 出 发 ,方便 用 户 搜索 信息 ,为 用 户 使 用 提供 帮助 反馈 
信息 。 

【技术 要 领 】 使 用 Photoshop 中 的 钢笔 工具 绘制 曲线 区 域 作为 导航 的 背景 ; 运用 圆 角 
矩形 工具 绘制 导航 菜单 的 衬 底 ; 运用 文字 工具 输入 导航 内 容 。 

【解决 问题 】 网 页 导航 的 设计 制作 。 

【应 用 领域 】 网 页 页 面 设计 。 

效果 图 

本 网 站 的 导航 分 为 菜单 导航 和 服务 信息 导航 ,网 站 导航 的 效果 图 如 图 6-30 和 图 6-31 
所 示 。 

任务 分 析 

“ 易 购 商城 ?网 站 设计 以 橙色 为 主要 基调 ,运用 流线型 的 曲线 区 域 作为 导航 的 衬 底 ,菜单 
导航 是 在 流 线 底 下 方 用 圆 角 和 矩形 作为 衬 底 设 计 制 作 . 服 务 信息 导航 使 用 形象 的 图 片 加 文字 
设计 而 成 ,导航 效果 清晰 易 操 作 。 

首先 使 用 钢笔 工具 绘制 流线型 的 区 域 .然后 使 用 文字 工具 将 菜单 导航 的 内 容 输 入 进去 ， 
并 使 用 圆 角 和 矩形 工具 作为 菜单 导航 的 衬 底 。 
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于 24 扣 本 ne# 芍 和 ht 本 5a 务 目 直 反思 


图 6-30 网 站 导航 效果 图 一 


洒 24 锅 二 gg 主攻 扣 f 中 心 嫩 售后 服务 1 加 冶 反馈 


图 6-31 网 站 导航 效果 图 二 


对 服务 信息 导航 的 相关 图 片 进行 处 理 ,调整 其 大 小 和 位 置 ,并 使 用 文字 工具 输入 服务 信 
息 导航 的 内 容 ,调整 其 位 置 完成 导航 的 制作 。 

重点 和 难点 

(1) 运用 钢笔 工具 绘制 主 色调 曲线 区 域 ,并 对 其 进行 调整 填充 。 

(2) 使 用 自由 变换 工具 调整 图 片 大 小 。 

操作 步骤 

1. 新 建文 件 

启动 Photoshop CS4 ,选择 菜单 “文件 "|* 新 建 ”命令 ,设置 文件 大 小 为 1000pxX 850px( 宽 
度 X 高 度 ) ,分 辩 率 为 72 像素 /英寸 (dpi) ,色彩 模式 为 RGB ,背景 为 白色 ,文件 名 称 为 index， 
如 图 6-32 所 示 。 

2. 使 用 圆 角 矩形 工具 绘制 左 侧 底 纹 

将 拾 色 器 中 前 景色 的 值 设置 为 RGB(255,96.0), 选 择 工具 箱 中 的 圆 角 矩形 工具 (如 
图 6-33 所 示 ), 将 圆 角 和 矩形 的 半径 设置 为 30px( 如 图 6-34 所 示 ) ,在 画布 左 侧 绘制 圆 角 和 矩形 ， 
如 图 6-35 所 示 。 

3. 使 用 钢笔 工具 绘制 曲线 区 域 底 纹 

选择 工具 箱 中 的 钢笔 工具 ,绘制 出 曲线 底 纹 的 轮廓 路 径 。 选 择 工具 箱 中 的 转换 点 工具 
调整 轮廓 曲线 ,使 其 平滑 ,如 图 6-36 所 示 。 


种 除 预 设 (D 
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图 6-32 ”新建 文件 index. psd 
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图 6-33 圆 角 矩形 工具 
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图 6-34 圆 角 矩形 半径 设置 


图 6-35 左 侧 底 纹 效果 


图 6-36 ”调整 曲线 轮廓 路 径 
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在 轮廓 路 径 上 单 击 右键 ,选择 “建立 选区 ”( 如 图 6-37 所 示 ) ,在 “图 层 ” 面 板 的 右 下 角 单 
击 “ 创 建新 图 层 ” 按 钮 ,新 建 “ 图 层 1”, 如 图 6-38 所 示 。 使 用 油漆 桶 工具 ,对 “图 层 1" 中 的 选 
区 进行 填充 ,如 图 6-39 所 示 。 


图 6-37 为 路 径 建 立 选区 图 6-38 新建 图 层 


图 6-39 填充 曲线 选区 


复制 “图 层 1" 为 “图 层 1 副本 ”, 使 用 键盘 上 的 方向 键 ,将 * 图 层 1 副本 "向 左 、 向 下 各 移动 4px。 
将 拾 色 器 中 的 前 景色 改 成 RGB(255,207,178) 的 浅 橙色 ,如 图 6-40 所 示 。 按 住 Ctrl 
键 , 单 击 * 图 层 1 副本 ”, 选 择 * 图 层 1 副本 ”选区 ,删除 选区 中 的 内 容 , 使 用 油漆 桶 工具 填充 


当前 


©@H:|23 度 OL |87 
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图 6-40 “ 拾 色 器 "对 话 框 


“图 层 1 副本 ”选区 ,将 “图 层 1”" 和 “图 层 1 副本 "位置 对 调 ,使 浅 橙色 曲线 选区 置 于 橙色 曲线 
选区 的 下 方 ,这 样 修改 后 的 选区 就 更 有 层次 感 ,效果 如 图 6-41 所 示 。 


图 6-41 曲线 区 域 效 果 图 


用 同样 的 方法 使 用 钢笔 工具 绘制 网 站 上 方 曲线 底 纹 轮廓 路 径 ( 如 图 6-42 所 示 ) ,运用 转 
换 点 工具 将 曲线 调 至 平滑 ,在 路 径 上 右 击 建立 选区 (如 图 6-43 所 示 )。 


图 6-42 上 方 曲线 区 域 轮廓 路 径 


图 6-43 曲线 区 域 效 果 图 


新 建 “图 层 2”, 使 用 油漆 桶 工具 填充 “图 层 2”( 如 图 6-44 所 示 )。 调 整 图 层 顺 序 , 将 “图 
层 2” 调 整 到 “图 层 1? 下 方 , 效 果 图 如 图 6-45 所 示 。 

4. 使 用 文字 工具 制作 菜单 导航 

选择 工具 箱 中 的 文字 工具 ,在 相应 位 置 输入 “数码 产品 家 用 电器 工具 器 械 化 妆 保 健 
特效 护理 香水 系列 居家 洗 护 ”, 效 果 图 和 文字 的 参数 如 图 6-46 所 示 。 
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图 6-44 填充 曲线 区 域 效果 图 


图 6-45 调整 图 层 顺序 效果 图 


数码 产品 “家 用 电 里 。 工具 加 械 “化妆 保健 ”特效 护理 香水 系列 层 家 洗 护 
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图 6-46 菜单 导航 效果 
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5. 使 用 圆 角 和 矩形 工具 绘制 菜单 导航 衬 底 
选择 工具 箱 中 的 圆 角 矩形 工具 ,在 菜单 导航 “数码 产品 位置 绘制 圆 角 和 矩形 ,大 小 以 覆盖 
“数码 产品 ?为 宜 , 如 图 6-47 所 示 。 


人 用 电 三 工具 也 枯 化 六 保 促 ”特效 护理 ”香水 系列 居家 洗 护 


图 6-47 ”绘制 圆 角 和 矩形 


将 圆 角 和 矩形 图 层 调整 至 “数码 产品 ”图 层 下 方 , 并 将 圆 角 和 矩形 颜色 更 换 为 RGB(246， 
205,2) 的 颜色 值 ,效果 如 图 6-48 所 示 。 


全 E 术 用 由 工具 于 术 化 次 保 峙 特 黎 护理 秋水 巴 询 居家 尝 护 


图 6-48 调整 圆 角 矩形 图 层 位 置 


复制 圆 角 和 矩形 图 层 6 次 ,使 用 移动 工具 将 新 复制 的 6 个 图 层 分 别 移动 到 菜单 导航 的 相 
应 位 置 , 如 图 6-49 所 示 。 

6. 使 用 选区 工具 导入 外 部 图 片 

在 Photoshop CS4 中 ,选择 菜单 "文件 "| "打开 ”命令 ,打开 外 部 的 一 张 图 片 。 

选择 工具 箱 中 的 魔术 棒 工 具 , 将 容 差 值 设 置 为 20, 使 用 魔术 棒 工 具 点 选 图 片 中 蓝 色 区 
域 ,如 图 6-50 所 示 。 
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图 6-49 复制 调整 圆 角 和 矩形 图 层 


图 6-50 用 魔术 棒 选 择 蓝 色 区 域 


选择 菜单 “选择 ”|“ 反 向 ”命令 , 按 Ctrl 十 C 组 合 键 复制 选区 内 容 。 

选择 index 文件 , 按 Ctrl+V 组 合 键 ,将 复制 的 内 容 粘贴 到 index 画布 中 ,调整 其 大 小 和 
位 置 。 

使 用 文字 工具 ,输入 *24”“ 小 时 ”“ 营 业 ”, 将 这 三 个 文字 图 层 的 内 容 和 位 置 进行 调整 ， 
效果 如 图 6-51 所 示 。 

7. 使 用 文字 工具 制作 服务 信息 导航 

在 Photoshop CS4 中 ,选择 菜单 “文件 "| * 打 开 ” 命 令 ,打开 购物 车 图 片 , 如 图 6-52 所 示 。 

使 用 魔术 棒 工 具 将 购物 车 选 出 : 按 Ctrl 十 C 组 合 键 复制 购物 篮 。 选 择 index 文件 , 按 
Ctrl 十 V 组 合 键 将 购物 车 粘贴 到 index 文件 中 ,效果 图 如 图 6-53 所 示 。 


图 6-51 添加 “24 小 时 营业 ”后 效果 图 


图 6-52 购物 车 图 片 


图 6-53 ”粘贴 到 index 文件 中 的 效果 
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调整 购物 车 的 大 小 和 位 置 ,使 用 文字 工具 输入 “购物 车 ,文字 参数 如 图 6-54 所 示 ,效果 
如 图 6-55 所 示 。 
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图 6-54 文字 参数 
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图 6-55 ”添加 “购物 车 "后 效果 图 


使 用 同样 的 方法 ,将 其 他 装饰 小 图 片 导入 到 index 文件 中 ,并 使 用 文字 工具 输入 “报价 
中 心 "“ 售 后 服务 “留言 反馈 ”, 将 图 片 和 文字 调整 到 合适 的 大 小 和 位 置 ,制作 完成 服务 信 
息 导 航 , 效 果 如 图 6-56 所 示 。 


张 24 总 EL 


图 6-56 ”网 站 导航 图 效果 


任务 3 主页 栏目 设计 

任务 背景 

网 站 主页 栏目 是 呈现 网 站 信息 的 重要 区 域 ,可 以 适当 地 进行 底 纹 边框 的 装饰 ,在 此 区 域 
中 可 以 适当 根据 网 站 内 容 信息 的 分 类 ,运用 简单 大 方 的 底 纹 和 线条 对 信息 进行 分 块 ,使 整个 
网 站 更 加 美观 。 

任务 要 求 

(1) 主页 栏目 以 衬托 凸显 网 站 信息 内 容 为 出 发 点 ,设计 简单 大 方 。 
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& 

(2) 主页 栏目 的 设计 要 区 域 明晰 ,方便 用 户 使 用 。 

【技术 要 领 】 使 用 Photoshop 中 的 圆 角 矩形 工具 绘制 底 纹 ; 运用 选区 混合 运算 绘制 不 
规则 形状 图 ; 使 用 定义 图 案 命令 来 定义 图 案 , 并 使 用 图 案 填充 工具 进行 图 案 填 充 。 

【解决 问题 】 网 页 主页 栏目 的 设计 制作 。 

【应 用 领域 】 网 页 页 面 设计 。 

效果 图 

网 站 的 主页 栏目 分 为 两 个 区 域 ,效果 图 如 图 6-57 所 示 。 


图 必 -全 
EN ~ 不 通明 大: 100%， 


要 证: 口 也 中 卜 


图 6-57 网 站 主页 栏目 效果 


任务 分 析 

“ 易 购 商城 "主页 面 中 栏目 设计 主要 分 为 “特价 促销 "区域 和 “推荐 商品 ”区 域 。 在 这 两 个 
区 域 中 继续 秉承 整个 网 站 的 流线型 设计 风格 ,以 橙色 为 主 色 调 。 

首先 使 用 圆 角 矩形 工具 绘制 “特价 促销 ”区域 底 纹 ,使 用 加 减 选 区 工具 对 底 纹 进行 混 
合 运算 ,产生 半 框 效果 ; 然后 使 用 文字 工具 输入 “特价 促销 ”, 导 入 SALE 小 图 标 和 售后 员 
图 片 ; 使 用 圆 角 和 矩形 工具 绘制 “推荐 商品 "区域 底 纹 , 运 用 选区 制作 圆 角 细 线 ,完成 栏目 
设计 。 

重点 和 难点 

(1) 将 矢量 图 层 栅 格 化 转换 成 普通 图 层 。 

(2) 运用 选区 工具 和 混合 运算 选区 制作 不 规则 的 图 形 。 

(3) 定义 图 案 , 并 使 用 图 案 填充 工具 。 
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全 
操作 步骤 
1. 使 用 圆 角 矩形 工具 绘制 "特价 促销 "区域 线 杠 
选择 工具 箱 中 的 圆 角 矩形 工具 (如 图 6-58 所 示 ) ,在 index 画布 右边 的 空白 区 域 绘制 一 
个 圆 角 和 矩形 ,设置 圆 角 和 矩形 的 颜色 值 为 RGB(255,96,0), 图 层 为 “形状 2”, 效 果 如 图 6-59 
所 示 。 


图 6-58 圆 角 矩形 工具 


图 6-59 圆 角 和 矩形 效果 


选中 图 层 “形状 2”, 单 击 鼠 标 右键 ,在 右键 菜单 中 选择 “ 栅 格 化 图 层 ” 命 令 ( 如 图 6-60 所 
示 ) ,将 图 层 “ 形 状 2” 的 矢量 图 层 转 换 成 “形状 2 的 普通 图 层 ,转换 后 的 “图 层面 板 信息 如 
图 6-61 所 示 。 


正常 > | 不 通明 度 : 100% > 
起 定 : DD 7 中 全 填充 :| 100% 站 
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图 6-60 栅 格 化 图 层 图 6-61 栅 格 化 后 的 “图 层 "面板 


RR 


复制 “形状 2? 图 层 , 产 生 * 形 状 2 副本 ”图 层 (如 图 6-62 
所 示 ) ,选择 “形状 2 副本 ”图 层 , 按 住 Ctrl 十 T 组 合 键 ,将 其 

按 住 Ctrl 键 , 单 击 “ 形 状 2 副本 ”图 层 , 选 中 该 图 层 选 
区 (如 图 6-63 所 示 ) ,然后 在 “图 层面 板 中 选中 “形状 2” 图 
层 , 按 Delete 键 ,以 “形状 2 副本 ”图 层 的 选区 为 依据 将 “ 形 
状 2” 图 层 中 的 部 分 内 容 删 除 (如 图 6-64 所 示 ) 。 

在 “图 层 ” 面 板 中 选择 “形状 2 副本 ”, 单 击 “ 图 层 ” 面 板 
中 的 “删除 图 层 ” 命 令 , 删 除 “ 形 状 2 副本 ”, 效 果 如 图 6-65 
所 示 。 图 6-62 “形状 2 副本 "图 层 


图 6-63 ”选择 “形状 2 副本 ”选区 


图 6-64 ”删除 “形状 2" 中 部 分 内 容 


i 


图 6-65 ”删除 “形状 2 副本 "效果 


选择 工具 箱 中 的 圆 角 矩 形 工具 ,在 “形状 2 图 层 上 绘制 小 圆 角 和 矩形 ,图 层 为 “形状 3”, 颜 
色 值 为 RGB(255.207,178) ,如 图 6-66 所 示 。 


ss 


图 6-66 小 圆 角 矩形 


栅 格 化 图 层 “ 形 状 3”, 按 住 Ctrl 键 单 击 图 层 “ 形 状 3” ,选中 其 选区 ,如 图 6-67 所 示 。 选 
择 菜 单 “选择 ”1“ 反 向 ”命令 ,选择 画布 中 除 “ 形 状 3” 的 全 部 区 域 ,如 图 6-68 所 示 。 
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图 6-67 选择 “形状 3 选区 


6-68 反 向 选择 “形状 3” 选 区 


选择 矩形 选 框 工具 ,选择 其 中 的 交叉 选区 运算 , 框 选 “形状 2 图 层 中 的 部 分 区 域 ,混合 


运算 选 


区 后 的 效果 图 如 图 6-69 所 示 。 
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图 6-69 混合 运算 选区 


选区 选择 好 了 之 后 ,在 “图 层 ” 面 板 中 选择 “形状 2” 图 层 , 按 Delete 键 ,将 “形状 2” 中 的 
相应 部 分 删除 ,出 现 效 果 如 图 6-70 所 示 。 删 除 图 层 “ 形 状 3”, 效 果 如 图 6-71 所 示 。 


ee 


图 6-70 ”删除 “形状 2” 中 的 部 分 内 容 


图 6-71 删除 “形状 3” 


使 用 同样 的 方法 将 圆 角 和 矩形 框 线 的 上 半 部 分 删除 ,效果 如 图 6-72 所 示 。 


图 6-72 圆 角 矩形 线 框图 


2. 使 用 文字 工具 输入 栏目 标题 

选择 工具 箱 中 的 文字 工具 ,输入 “特价 促销 ”文字 ,文字 的 参数 设置 和 效果 图 如 图 6-73 
所 示 。 

3. 导入 外 部 图 片 修饰 

在 Photoshop CS4 中 ,选择 菜单 "文件 "| “打开 ”命令 ,打开 内 容 为 "SALE"” 的 小 图 片 , 使 
用 魔 棒 工 具 选择 SALE 渐变 环 ,将 其 粘贴 到 index 文 件 的 画布 中 ,效果 如 图 6-74 所 示 。 

调整 SALE 渐变 环 的 大 小 和 位 置 ,使 其 美观 大 方 。 使 用 同样 的 方法 打开 “售后 员 ” 图 
片 , 并 将 其 内 容 粘贴 到 index 文 件 的 画布 中 ,调整 其 大 小 和 位 置 ,效果 如 图 6-75 所 示 。 
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室 


图 6-73 文字 效果 图 


双击 “售后 员 ” 图 片 所 在 的 图 层 , 弹 出 “图 层 样式 ”对 话 框 ,为 该 图 层 设置 “投影 ”效果 ,如 
图 6-76 所 示 。 设 置 效果 后 的 主页 栏目 效果 图 如 图 6-77 所 示 。 


图 6-74 粘贴 SALE 图片 


图 6-75 粘贴 售后 员 图 片 


4. 使 用 圆 角 矩形 工具 绘制 "推荐 商品 "的 线 框 
选择 工具 箱 中 的 圆 角 和 矩形 工具 ,在 index 页 面 中 绘制 圆 角 矩形 ,图 层 名 称 为 “形状 5”, 如 
图 6-78 所 示 。 
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ET 


回 巴 8) 


图 6-76 “图 层 样式 "对 话 框 


乡 一 稼 价 促 钠 


图 6-77 设置 投影 后 的 效果 图 


图 6-78 大 圆 角 和 卸 形 底 纹 
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在 “图 层 "面板 中 选择 “形状 5” 图 层 , 单 击 右键 将 其 家 格 化 , 按 住 Ctrl 键 , 单 击 * 形 状 5” 
图 层 ,选中 国 角 矩形 选区 。 
选择 菜单 < 选择 "|* 修 改 "|* 收 缩 "命令 (如 图 6-79 所 示 ), 收 缩 2px', 按 键盘 上 的 Delete 
键 , 将 “形状 5” 图 层 中 的 相应 选区 删除 ,在 “形状 5 图 层 中 只 剩 下 加 角 矩 形 线 框 ,效果 图 如 
图 6-80 所 示 。 


恨 双 加 | 涛 策 my 视图 WW 窗口 w0 帮助 (D | 
隆 立 则 审 竹 | 申 


全 部 以 ) CtrltA 
取消 选择 D) CtrltD 
反 向 GD) Shift+CtrltI 
所 有 图 屋 0L) ALttCtrltA 


调整 边缘 站 ) 人 ItHCtrl+R 


扩大 选取 (5) 
选 职 相似 ER) 


变换 达 区 (1) Shifttm 
在 快速 荣 版 模式 下 编 各 0) 

过 入 这 区 四) 

存 入 选区 WV) 


图 6-79 修改 收缩 选区 


图 6-80 圆 角 矩形 线 框 
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选择 工具 箱 中 的 矩形 选 框 工具 ,在 图 层 “ 形 状 5" 上 框 选 圆 角 矩形 线 框 的 左上 部 分 , 按 
Delete 键 删除 选中 部 分 。 


选择 工具 箱 中 的 文字 工具 ,输入 “推荐 商品 ”使 其 与 “特价 促销 "样式 相同 。 将 BEST 图 
标 导 入 到 index 文件 画布 中 ,调整 大 小 和 位 置 ,效果 如 图 6-81 所 示 。 


NX 


图 6-81 ”推荐 商品 效果 图 


5. 使 用 图 案 填 充 工具 分 割 “推荐 商品 "栏目 
选择 菜单 "文件 "| “新 建 " 命 令 , 设 置 文件 大 小 为 4pxX 1px( 宽 度 X 高 度 ), 分 辨 率 为 
72 像素 /英寸 (dpi) ,色彩 模式 为 RGB, 背 景 为 白色 ,文件 名 称 为 tu, 如 图 6-82 所 示 。 


名 称 (WD): | 可 [mm | 
预 设 (p): | 是“ 国 | CC 息 一 
mge:4 | 时 同 BID 

并):[1 | 人 国 
FT pr Device Central(E)... 
| 
背景 内 容 (0): 白色 | 图 区 大小: 
党 高 级 12 字 节 


图 6-82 ”新建 文件 tu. psd 
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使 用 矩形 选 框 工具 选择 左边 两 个 像素 的 选 框 ,使 用 油漆 桶 
选择 菜单 “编辑 ”|“ 定 义 图 案 " 命 令 , 将 上 面 的 图 案 定义 名 
为 “图案 1” 的 图 案 (如 图 6-84 所 示 )。 


图 6-83 图 案 


me 


图 6-84 定义 图 案 


新 建 “ 图 层 11” ,选择 工具 箱 中 的 单行 选 框 工具 (如 图 6-85 所 示 ), 在 画布 上 单 击 出 一 条 
高 1 像素 的 选区 。 

选择 油漆 桶 工具 ,将 油漆 桶 工具 的 填充 方式 改 为 图案”, 在 其 后 的 选项 中 选择 前 面 定 义 
过 的 “图 案 1”( 如 图 6-86 所 示 ) ,填充 “图 层 11” 的 单行 选 框 ,效果 如 图 6-87 所 示 。 


的 二 冯 


~“ 国 本 -| 


图 6-85 单行 选 框 工具 图 6-86 ”图案 填充 


国 一 执 若 方 品 


Xe 


图 6-87 图 案 填 充 效果 


6. 巧 用 选区 工具 设计 页 面 底部 
新 建 “ 图 层 12”, 选 择 矩 形 选 框 工具 .在 页 面 的 右 下 角 和 矩形 选区 (如 图 6-88 所 示 ) ,使 用 油 
漆 桶 工具 填充 前 景色 为 橙色 (如 图 6-89 所 示 )。 


图 6-88 ”和 矩形 选区 


付 一 扩大 方 品 


图 6-89 填充 矩形 选区 


新 建 “ 图 层 13”, 选 择 椭圆 选 框 工具 , 沿 着 页 面 左 边 和 下 边 的 橙色 折线 ,做 切线 正 圆 选 
区 ,如 图 6-90 所 示 。 按 Shift 十 Ctrl 十 1 组 合 键 进行 反 向 选择 。 


国 一 推荐 商品 


6-90 切线 圆 选 区 
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选择 椭圆 选 框 的 交叉 选 框 工具 (如 图 6-91 所 示 ) ,交叉 选中 拐角 选区 (如 图 6-92 所 示 )， 
在 “图 层 13” 上 填充 交叉 拐角 选区 为 前 景色 橙色 ,如 图 6-93 所 示 。 


EE TE rt 


图 6-91 椭圆 选区 的 交叉 选区 选项 


图 6-92 选区 混合 运算 


图 6-93 填充 拐角 区 域 


选择 工具 箱 中 的 文字 工具 ,输入 网 站 版 权 信息 ,文字 的 参数 如 图 6-94 所 示 。 
整个 网 站 主页 栏目 设计 的 效果 图 如 图 6-95 所 示 。 


任务 4 网 页 左 侧 模块 设计 


任务 背景 
“ 易 购 商城 "中 网 站 左 侧 包 含 用 户 登 录 模块 ,商品 搜索 模块 和 销售 排行 模块 。 


雪人 多 汽 学 入 全 全 


EL CS 


图 6-94 文字 参数 
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版 权 所 有 : 易 购 商 域 


任务 要 求 


技术 支持 ，woda 


图 6-95 主页 栏目 效果 图 


能 够 清晰 地 呈现 各 个 模块 内 容 。 
【技术 要 领 】 使 用 图 案 填充 工具 填充 虚线 分 割 三 个 模块 ; 使 用 文字 工具 输入 模块 名 称 。 
【解决 问题 】 网 页 左 部 模块 设计 。 


【应 用 领域 】 网 页 页 面 设计 。 
效果 图 


网 站 左 侧 模块 的 效果 图 如 图 6-96 所 示 。 
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任务 分 析 

“ 易 购 商 城 ”网 站 左 侧 包 含 用 户 登录 模块 、 商 品 搜索 模块 
和 销售 排行 模块 三 部 分 ,三 个 模块 在 一 个 大 的 圆 角 矩形 底 上 
呈现 ,为 了 使 网 站 简单 清晰 大 方 , 采 用 简单 的 虚线 隔 开 。 

首先 使 用 Photoshop 中 的 图 案 填充 工具 填充 出 虚线 作为 
分 割 线 ; 然后 使 用 文字 工具 输入 模块 的 名 称 。 

重点 和 难点 

单行 选 框 工具 的 图 案 填 充 方法 。 

操作 步骤 

1. 收缩 选区 

选择 左 侧 的 圆 角 矩形 所 在 的 图 层 * 形 状 1”, 按 住 Ctrl 键 ， 
单 击 此 图 层 选中 图 层 的 内 容 选 区 ,选择 菜单 “选择 "|* 修 改 ”| 
“收缩 "命令 ,使 选区 收缩 30 像素 (如 图 6-97 所 示 ) ,缩小 选区 
后 , 按 Ctrl 十 X 组 合 键 剪 切 选 区 内 容 , 效 果 如 图 6-98 所 示 。 


图 6-96 左 侧 模块 效果 图 


图 6-97 收缩 选区 


按 Ctrl 十 V 组 合 键 ,将 刚才 剪 切 的 选区 粘贴 在 画布 上 ,图 层 名称 为 “图 层 14”, 双击 “图 
层 14”, 调 出 “图 层 样 式 ” 对 话 框 ,为 图 层 添加 “外 发 光 ” 效 果 , 如 图 6-99 所 示 。 

2. 图 案 填充 绘制 分 割 线 

新 建 “ 图 层 15” ,选择 工具 箱 中 的 矩形 选 框 工具 ,在 画布 上 绘制 1 像素 的 单行 选 框 (如 
图 6-100 所 示 ) ,使 用 油漆 桶 工具 填充 “图 案 1”, 并 使 用 文字 工具 输入 “用 户 登 录 ”, 效 果 如 
图 6-101 所 示 。 
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图 6-98 剪 切 选区 


图 6-99 外 发 光 效 果 


用 同样 的 方法 完成 “商品 搜索 ”和 “销售 排行 "模块 的 设计 ,效果 图 如 图 6-102 所 示 。 

3. 导入 外 部 图 片 装饰 左 侧 模块 

选择 菜单 “文件 ”1“ 打 开 ” 命 令 , 打 开 如 图 6-103 所 示 的 图 片 ,使 用 魔术 棒 工 具 将 图 片 内 
容 复制 粘贴 到 index 文件 的 画布 上 ,调整 其 大 小 和 位 置 ,效果 如 图 6-104 所 示 。 
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图 6-100 单行 选区 图 6-101 用 户 登录 


图 6-102 页 面 左 侧 模块 图 6-103 打开 装饰 图 片 


6-104 加 入 装饰 图 片 后 效果 
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4. 添加 Logo 和 文字 
将 任务 1 中 的 网 站 标志 复制 粘贴 到 index 文件 的 画布 中 ,调整 大 小 和 位 置 , 使 用 文字 工 
具 输 入 “ 易 购 商 城 " 和 “购物 上 易 购 省 钱 又 放心 ”, 最 终 效果 图 如 图 6-105 所 示 。 


R 加 了 7 加 ses 入 ho 本 和 5A ER 


CswG 购 物 上 易 购 省 钱 又 放心 
易 购 商城 - 


图 6-105 网 站 整体 效果 图 


任务 5 网 页 切片 制作 


任务 背景 
在 Photoshop 中 将 整个 网 站 页 面 设 计 完 成 后 ,可 以 通过 Photoshop 中 的 切片 工具 对 整 
个 页 面 切 块 , 并 存储 成 Web 所 有 格式 ,实现 图 片 与 网 页 之 间 的 转换 。 


任务 要 求 
(1) 在 切割 整个 网 页 效果 图 前 ,应 规划 好 网 页 中 内 容 固定 区 块 . 内 容 变化 区 块 和 热 区 链 
接 的 位 置 。 


(2) 切片 要 精确 无 误 。 

(3) 存储 格式 要 正确 无 误 。 

【技术 要 领 】 使 用 标尺 和 参考 线 工 具 将 图 片 划分 区 域 ; 使 用 切片 工具 将 整个 页 面 切 割 ; 
使 用 存储 Web 所 用 格式 命令 将 页 面 存储 为 网 页 格式 。 

【解决 问题 】 图 片 到 网 页 页 面 衔接 。 
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【应 用 领域 】 网 页 的 切片 。 

效果 图 

网 站 的 切片 效果 图 如 图 6-106 所 示 。 


图 6-106 图 片 的 切片 效果 图 


任务 分 析 

切片 和 存储 Web 所 用 格式 命令 ,能 实现 Photoshop 和 Dreamweaver 之 间 的 转换 ,在 整 
个 网 站 界面 设计 实现 后 ,需要 进一步 使 用 相应 工具 实现 图 片 向 网 页 的 转换 。 

本 任务 首先 使 用 标尺 和 参考 线 将 整个 网 页 的 页 面 进行 区 域 划分 ,然后 使 用 切片 工具 来 
分 割 区 域 ,最 后 将 切 好 的 页 面 进行 存储 ,存储 为 Web 和 设备 所 用 格式 。 

重点 和 难点 

(1) 切片 的 思路 和 精准 度 。 

(2) 存储 的 格式 与 方法 。 

操作 步骤 

1. 合并 页 面 中 的 可 见 图 层 

在 “图 层 ” 面 板 中 单 击 右上 角 的 “选项 "按钮, 调 出 菜单 ,在 菜单 中 选择 “合并 可 见 图 层 " 命 
令 ( 如 图 6-107 所 示 )。 双 击 合 并 后 的 图 层 . 调 出 “图 层 样 式 ” 对 话 框 ,为 图 层 描 边 2 像素 , 具 
体 参数 如 图 6-108 所 示 。 
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Ee EC 
| 字 运 | 不 透明 度 :100% 天 复制 组 0).. 
锁定 : 口 7 十 全 100% 删除 隐 意 图 层 
B=: 日 区 7 清 
从 图 层 新 建 组 A) 
锁定 引 内 的 所 有 图 层 0) 
竺 换 为 智能 对 象 四) 
组 犀 性 ). 


SO YI 


合并 姐 王 ) Ctrl+E 
E | 


拼合 图 像 F) 
动画 项 1 
面 姑 选项 


关闭 
关闭 选项 卡 姐 


图 6-107 合并 可 见 图 层 


图 6-108 “图 层 样 式 " 对 话 框 


2. 用 参考 线 给 页 面 划 分 区 域 

选择 菜单 “视图 ”1“ 标 尺 ” 命 令 , 调 出 标尺 ,选择 “视图 ”|“ 新 建 参考 线 ” 命 令 ( 如 图 6-109 
所 示 ) ,根据 需求 为 页 面 新 建 相应 的 参考 线 , 效 果 如 图 6-110 所 示 。 当 然 , 也 可 以 按 住 鼠标 左 
键 从 上 侧 标尺 或 左 侧 标尺 拖 动 将 参考 线 拖 到 图 像 中 。 

3. 用 切片 工具 切 分 页 面 

选择 工具 箱 中 的 切片 工具 (如 图 6-111 所 示 ) , 沿 着 参考 线 对 整个 页 面 进 行 切 片 , 切 片 过 
程 中 要 仔细 ,将 整个 页 面 全 部 切 分 好 ,效果 如 图 6-112 所 示 。 
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| BO Wy | 
校 样 设置 UV) » 
术 祥 毅 色 0) Cultr 
色 域 警 肯 0) ShifttCtrlt 
全 素 长 宫 比 GE) » 
启 大 (0) Ctrltt 
总 小 0D) Ctrl 
按 屏 硕大 小 缩放 Cg) Ctrlt0 
实际 俐 案 ) Ctrltl 
打印 尺寸 CD) 
屏 再 模式 m) | 
| 显示 前 外 内 容 0 Cer 
显示 0 
| 标尺 四 ) Cerl 
MM 对齐 0_ ShifuCtrlt; 
对 齐 到 0) » 
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图 6-109 新 建 参 考 线 


澜 24 监 6 


图 6-110 ”全 部 参考 线 


图 6-111 切片 工具 
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图 6-112 切片 效果 图 


4. 存储 网 页 

选择 菜单 “文件 ”|“ 存 储 为 Web 和 设备 所 用 格 
式 ” 命 令 ( 如 图 6-113 所 示 ), 调 出 “存储 为 Web 和 设 
备 所 用 格式 ”对 话 框 (如 图 6-114 所 示 )。 

单 击 对 话 框 中 的 “存储 "按钮 . 调 出 “将 优化 结果 
存储 为 ”对话 框 ,选择 存储 文件 的 位 置 , 选 择 保存 类 
型 为 “HTML 和 图 像 (* html)” 选 项 (如 图 6-115 
所 示 )。 

在 文件 存储 的 位 置 会 多 出 一 个 网 页 文件 和 一 个 
存放 切片 图 像 的 文件 夹 images, 如 图 6-116 所 示 。 
双击 打开 index. html 文件 ,就 能 看 到 整体 的 网 页 效 
果 图 ,如 图 6-117 所 示 。 


故 本 本 | 4% 殷 (E 图 入) 图 导 () 选择 (5) 湾 答 
Cerlty 
打开 四 ) Ctrl40 
AlttCtrlt0 
| 打开 为 如 tiShifttCtrl40 


|_ 最近 打开 文件 0) » 


Corn 
关闭 全 部 和 HHCtrl4 
ShifttCtrlty 

curlts 
ShifttCtrl4S 


图 6-113 


“存储 为 Web 和 设备 
所 用 格式 "命令 
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图 6-114 “存储 为 Web 和 设备 所 用 格式 "对 话 框 


文件 名 0); index. htal ~ 
保存 类 型 )， NTNL 和 图 像 (htnl) 加 取 滑 
设置 IOWL by) 二 

切片 | 所 有 切片 ~ 


图 6-115 设置 保存 类 型 


图 6-116 生成 的 网 页 文件 


在 Dreamweaver 中 ,整个 被 切片 的 效果 图 是 一 个 表格 ,每 个 小 切片 是 一 个 单元 格 ,根据 
具体 的 内 容 在 单元 格 中 填充 内 容 , 最 后 去 完成 网 页 内 容 的 编辑 。 

当然 ,也 可 以 将 图 像 切片 中 需要 交换 图 像 效 果 的 切片 存储 成 两 张 显 示 效 果 不 同 的 
图 片 ,再 通过 Dreamweaver 中 * 鼠 标 经 过 图 像 ” 的 命令 局 来 实现 网 页 中 链接 的 图 片 更 换 
效果 。 
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图 6-117 最 终 的 网 页 文件 


知识 点 拓展 


制作 鼠标 经 过 图 像 

运用 Dreamweaver 中 的 菜单 “插入 "| * 图 像 对 象 " | “鼠标 经 过 图 像 ” 命 令 ,实现 网 页 中 热 
区 链接 的 变换 效果 。 

例如 有 两 张 效 果 图 ,这 两 张 图 的 唯一 变化 就 是 菜单 的 底 图 有 变化 ,如 图 6-118 和 
图 6-119 所 示 。 
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图 6-118 两 张 类 似 的 效果 图 


使 用 参考 线 和 切片 工具 对 两 张 图 分 别 切片 并 存储 成 Web 所 用 格式 ,两 张 效果 图 的 参考 
线 和 切片 位 置 完全 一 样 ,如 图 6-120 所 示 。 第 一 张 效果 图 存储 为 index. html 文件 ,第 二 张 
效果 图 存储 为 main. html 文件 。 
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于 24 览 鳃 gs 二 ” 欧 报 从 心 器 舍 后 服务 6 包 训 反 馈 


购物 上 易 购 


乡 24 览 赤 mg 说” 葡 失 闪 中 心 器 千 服 务 5/ 多 到 友 全 


购物 上 易 购 省 钱 又 放 


图 6-119 两 张 效果 图 的 不 同 之 处 


号 24 刀 司 mms 入 tne 二 wpng HK om 


购物 上 | 易 购 省 钱 又 放心 


图 6-120 参考 线 和 切片 


以 导航 菜单 中 的 “数码 产品 ”为 例 ,第 一 张 效果 图 的 images 文件 夹 “ 数 码 产 品 " 菜 单 的 图 
片 名 称 为 index_03. gif ,第 二 张 效果 图 的 images 文件 夹 中 “数码 产品 ”菜单 的 名 称 为 main_ 
03. gif 文件 。 

将 main_03. gif 文件 复制 到 第 一 个 网 页 index 文件 的 images 文件 夹 里 面 。 

在 Dreamweaver 中 打开 index. html 文件 ,选中 “数码 产品 ”图 片 (如 图 6-121 所 示 ) , 按 
Delete 键 删除 它 ,如 图 6-122 所 示 。 


< 水 A 鲜 mg 和 寺 。 注 报价 中 心 号 售后 服务 | 留言 友人 


©swG 购物 上 易 购 省 钱 又 放心 
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图 6-121 选中 “数码 产品 "照片 


在 “数码 产品 "表格 中 ,插入 鼠标 经 过 图 像 “ 原 始 图 像 ” 为 index_03. gif, “鼠标 经 过 图 像 ” 为 
main_03. gif( 如 图 6-123 所 示 ), 单 击 “ 确 定 ” 按 钮 ,实现 网 页 的 鼠标 经 过 更 换 图 像 的 效果 。 
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图 6-122 删除 “数码 产品 "照片 


Inagell 


inages/index 03. ipg 


inages/nain 03. ipg 


问 ] 预 载 忌 标 经 过 图 像 


图 6-123 “插入 鼠标 经 过 图 像 " 对 话 杠 


实 训 ”Photoshop 中 GIF 动画 的 制作 


实 训 目的 

通过 使 用 Photoshop CS4 中 的 动画 窗口 帧 变化 ,结合 图 层 的 显示 隐藏 功能 , 在 
Photoshop 中 制作 简单 的 网 页 GIF 小 动画 ,达到 美化 网 页 的 效果 。 

本 实 训 目 的 在 于 让 学 生 使 用 Photoshop 中 的 “动画 ”面板 功能 制作 七 彩 小 动画 “ 易 购 商 
城 ”, 使 学 生 掌 握 一 般 的 GIF 动画 制作 的 设想 和 步骤 。 

实 训 内 容 

在 Photoshop 中 制作 一 个 简单 的 GIF 小 动画 。 

实 训 过 程 

1. 新 建文 件 

启动 Photoshop CS4, 选 择 菜 单 “ 文 件 ”|“ 新 建 "命令 ,设置 文件 大 小 为 170pxX 40px( 宽 
度 X 高 度 ) ,分 辩 率 为 72 像素 /英寸 (dpi) ,色彩 模式 为 RGB, 背景 为 白色 ,文件 名 称 为 dong， 
如 图 6-124 所 示 。 

2. 使 用 文字 工具 输入 内 容 

选择 工具 箱 中 的 文字 工具 ,在 画布 上 输入 “易趣 购物 "文字 ,文字 的 颜色 不 限 ,文字 的 其 
他 参数 如 图 6-125 所 示 。 


3. 七 彩 渐变 填充 
单 击 “ 图 层 ” 面 板 右 下 角 的 “创建 新 图 层 ” 按 钮 中 ,新 建 “图 层 1”。 选 择 工具 箱 中 的 渐变 
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图 6-124 新 建文 件 dong. psd 


图 6-125 文字 内 容 


工具 ,在 渐变 编辑 器 中 选择 “七 彩 渐变 "(如 图 6-126 所 示 ), 在 “图 层 1” 上 填充 左右 方向 的 七 
彩 渐变 ,效果 如 图 6-127 所 示 。 


图 6-126 渐变 编辑 器 
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图 6-127 ”渐变 填充 “图 层 1” 


将 “图 层 1” 的 渐变 向 左 移动 ,移动 出 画布 ,如 图 6-128 所 示 。 


图 6-128 ”向 左 移动 “图 层 1” 


4. 在 “动画 "面板 中 制作 帧 动画 
选择 菜单 “窗口 ”| 动画” 命令 (如 图 6-129 所 示 ), 调 出 “动画 ”面板 ,在 “动画 ”面板 中 将 
当前 图 层 显示 内 容 自 动 创建 为 第 一 帧 (如 图 6-130 所 示 ) 。 


图 像 [) 图 层 册 选择 (5) 记 镇 上 sme Bi wwe 


6-129 “窗口 "| 动画 ”命令 


单 击 * 动 画 ?面板 下 方 的 “新 建 帧 ”按钮 ,新建 一 帧 。 

选中 “图 层 1”, 用 移动 工具 将 其 向 右 移动 ,移动 出 画布 ,如 图 6-131 所 示 。 

在 “动画 ?面板 下 方 单 击 * 过 渡 " 按 钮 ,弹出 * 过 渡 ? 对 话 框 , 设 置 过 渡 帧 为 18 帧 (如 
6-132 所 示 ),“ 动 画 ” 面 板 产 生效 果 如 图 6-133 所 示 。 
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图 6-131 向 右 移动 图 层 1” 


过 渡 方 式 (了 ): 
要 添加 的 帧 数 (F): 
厂 图 屋 

加 所 有 图 层 (A) 
加 选中 的 图 层 (5) 


厂 参数 

回 位 置 (p) 
不 透明 度 (9) 
效果 (E) 


图 6-132 “过 渡 ” 对 话 框 


图 6-133 “动画 ?面板 过 渡 效 果 


5. 创建 剪贴 蒙 版 

在 “图 层 ? 面 板 中 ,选择 “图 层 1”, 右 击 选择 “创建 剪贴 蒙 版 (如 图 6-134 所 示 )， 动 画 ? 面 
板 中 的 帧 发 生变 化 ,如 图 6-135 所 示 。 

6. 测试 动画 

单 击 “动画 ?面板 中 的 “播放 ”按钮 ,在 Photoshop 中 测试 动画 播放 效果 ,如 图 6-136 
所 示 。 
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图 6-134 创建 剪贴 蒙 版 
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图 6-135 “动画 ?面板 剪贴 莹 版 效果 


图 6-136 动画 效果 截图 
7. 保存 为 GIF 格式 动画 本 [ET 


选择 菜单 “文件 "|* 存 储 Web 和 设备 所 用 格式 ”命令 ,在 弹出 
的 对 话 框 中 将 图 像 的 格式 设置 为 GIF( 如 图 6-137 所 示 ) ,选择 存 
储 位 置 保存 即 可 。 
存储 完成 后 ,GIF 动画 就 制作 完成 了 。 图 6-137 存储 格式 为 GIF 


实 训 总 结 


本 实 训 主 要 是 通过 帧 变化 和 创建 剪贴 蒙 版 实现 七 彩 动 画 的 制作 ,在 学 生 学 习 完 本 章 知 
识 之 后 ,能 够 进一步 启发 学 生 结 合 Photoshop 工具 从 多 方面 .多 角度 对 网 页 进行 美化 。 


综合 任务 


在 Photoshop 中 设计 制作 一 个 “个 人 简介 ”网 站 的 效果 图 ,通过 切片 和 存储 Web 格式 命 
令 , 将 制作 好 的 效果 图 转换 成 网 页 格式 ,具体 要 求 如 下 。 

(1) 网 站 效果 图 要 简单 大 方 , 突 出 网 站 特点 。 

(2) 网 站 LOGO 制作 成 七 彩 GIF 动画 的 形式 。 
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CSS 和 ASP 脚 本 语言 


CSS 是 Cascading Style Sheet 的 缩写 , 它 通常 用 于 定义 网 页 样式 ,是 网 页 制作 中 的 一 个 
重要 知识 点 。 脚 本 语言 (VBScript 和 JavaScript) 是 介 于 HTML 和 Visual Basic .Java 等 高 
级 语言 之 间 的 一 种 语言 。 它 更 接近 于 高 级 语言 ,但 比 高 级 语言 简单 易学 ,也 没有 高 级 语言 
功能 那么 强大 。ASP 本 身 并 不 是 一 种 脚本 ,但 它 为 能 入 HTML 页 面 中 的 脚本 语言 提供 了 
运行 的 环境 。 本 模块 主要 讲解 CSS、VBScript 和 JavaScript。 

能 力 目 标 

1. 能 使 用 CSS 定义 网 页 样式 

2. 能 使 用 简单 的 ASP 内 部 函数 

3. 能 编写 简单 的 自 定义 函数 及 过 程 

知识 目标 
.CSS 的 基本 语法 
.CSS 选择 器 的 种 类 
.CSS 的 使 用 方式 
VBScript 的 数据 类 型 
.VBScript 常量 
.VBScript 变量 的 命名 规则 
.VBScript 的 作用 域 和 存活 期 
. VBScript 的 运算 符 
.VBScript 的 函数 和 过 程 
10. VBScript 的 条 件 及 循环 语句 
11. JavaScript 的 基本 语法 
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知识 储备 


知识 1 样式 表 的 优点 


样式 设计 是 指 应 用 HTML 和 CSS 设计 网 页 的 外 观 样式 。CSS 是 Cascading Style 
Sheet 的 缩写 , 译 为 “ 层 释 样式 表 ” 或 “级 联 样式 表 ”。 虽 然 CSS 在 网 页 里 与 HTML 编写 在 一 
起 ,但 是 它 不 属于 HTML。 它 可 以 扩展 HTML 的 功能 ,调整 字 间 距 \ 行 间距 ,取消 链接 的 下 
划 线 ,多 种 链接 效果 和 固定 背景 图 像 等 。CSS 可 以 实现 原来 HTML 标签 无 法 实现 的 效果 。 
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一 个 样式 表 又 称 为 CSS, 由 样式 规则 组 成 ,具有 以 下 特点 。 

1. 同时 更 新 站 点 的 多 个 页 面 ,更 快 更 容易 

在 对 多 个 网 页 文件 设置 同一 种 属性 时 ,无 须 对 所 有 的 文件 进行 反复 操作 ,只 需 给 多 个 页 
面 都 应 用 相同 的 样式 表 就 可 以 了 。 利 用 外 部 样式 表 , 可 以 将 站 点 上 所 有 网 页 都 指向 同一 个 
外 部 CSS 文件 ,只 要 更 改 外 部 CSS 文件 的 某 一 规则 ,整个 站 点 的 外 观 就 会 随 之 发 生 改变 。 

2. 格式 和 结构 分 离 

CSS 通过 将 定义 结构 的 部 分 和 定义 格式 的 部 分 相 分 离 , 使 用 户 对 页 面 的 布局 可 以 施加 
更 多 的 控制 。 

3. 制作 体积 小 ,下 载 页 面 快 

样式 表 只 包含 简单 的 文字 ,不 需要 图 像 、 执 行程 序 及 插件 。 使 用 CSS 可 以 减少 表格 标 
签 及 其 他 加 大 HTML 体积 的 代码 ,从 而 减 小 文件 的 大 小 。 浏 览 页 面 时 ,外 部 样式 表 文 件 会 
被 加 载 到 浏览 者 的 计算 机 缓存 中 ,这 样 就 大 大 提高 了 页 面 的 下 载 速度 。 


知识 2 CSS 的 基本 语法 


CSS 的 样式 规则 由 三 个 部 分 构成 :selector( 选 择 器 )、property( 属 性 ) 和 value( 属 性 的 
取 值 )。 基 本 的 格式 如 下 。 

(1) selector: CSS 选择 器 ,用 来 定义 样式 类 型 并 将 其 运用 到 特定 的 部 分 ,有 类 选择 器 、 
标签 选择 器 ID 选择 器 和 关联 选择 器 4 种 。 

(2) property: 就 是 指 将 要 被 设置 的 性 质 , 例 如 color。 

(3) value: 赋 给 property 的 值 ,例如 赋 给 color 的 值 可 以 为 red 或 者 并 FF0000。 下 面 
是 一 个 典型 的 例子 。 


body{backgroundcolor: #FFFFFF; color : #FF0000;} 
a{color:red;} 


该 样式 定义 实现 将 页 面 背 景 颜色 设置 为 白色 ,文字 颜色 设置 为 红色 ; 所 有 的 链接 都 设 
置 为 红色 。 为 了 方便 阅读 ,可 以 采用 以 下 分 行书 写 的 格式 。 


body{ 
background - color: #FFFFFF ; 
color: #FF0000; 

} 

al 
color: red; 


} 

通常 把 所 有 的 样式 定义 放 在 二 style 之 二 /style 之 标签 里 ,然后 再 放 到 二 head 之 二 /head 
标签 里 。 如 以 下 样式 将 设置 网 页 背景 色 为 白色 ,文字 颜色 为 白色 , 超 链接 的 颜色 为 红色 带 下 
划 线 。 

<style type = "text/css"> 

二 2 

body{ 


background — color: HFFFFFF ; 
color: #000000; 
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> 


} 
af 
Color: #FFO0000; 
text — decoration:underline; 
} 
==» 
</style> 
用 二 !-- 和 -- 二 注释 标签 来 包 于 样式 表 是 因为 样式 表 只 有 在 Explorer 和 Netscape 4.0 
以 上 的 浏览 器 中 才 被 支持 ,因此 使 用 该 注释 标签 后 可 以 使 样式 表 在 不 支持 样式 表 的 浏览 器 
中 被 忽略 。 


知识 3 常用 CSS 选择 器 


CSS 通过 定义 规则 并 将 其 应 用 到 文档 中 同一 元 素 , 以 减少 网 页 设计 者 的 工作 。 每 个 样 
式 都 是 由 一 系列 规则 组 成 ,每 条 规则 有 两 部 分 : 选择 器 和 声明 。 每 条 声明 又 是 属性 和 值 的 
组 合 。 通 常规 则 左边 是 选择 器 ,右边 是 CSS 属性 和 值 。CSS 选择 器 指明 文档 中 要 应 用 此 样 
式 的 元 素 , 可 以 有 多 种 形式 。 

1. 类 选择 器 

类 选择 器 能 够 把 相同 的 元 素 分 类 定义 成 不 同 的 样式 ,对 HTML 标签 均 可 以 使 用 
class 一 "类 名 "的 形式 对 类 属性 进行 名 称 指派 , 且 允 许 重复 使 用 。 类 选择 器 的 名 称 可 以 由 用 
户 自己 定义 ,需要 注意 的 是 在 定义 选择 器 时 ,名 称 前 面 要 加 一 个 点 号 (. )。 例 如 定义 了 一 个 
类 样式 ，text, 用 于 给 段落 文本 添加 样式 。 在 使 用 时 只 需 设 置 应 用 样式 的 段落 标签 class 属 
性 为 text 即 可 (class 二 "text") ,设置 完成 的 HTML 代码 如 下 。 


<pclass= "text"> 网 站 建设 与 管理 基础 与 实 训 </p> 


2. ID 选择 器 
ID 选择 器 的 使 用 方法 和 类 选择 器 基本 相同 ,不同 之 处 主要 在 于 ID 选择 器 只 能 在 
HTML 页 面 中 使 用 一 次 ,因此 针对 性 更 强 , 只 用 来 对 单一 元 素 定义 单独 的 样式 。ID 选择 器 
使 用 时 需要 设置 标签 的 ID 属性 ,对 于 一 个 网 页 而 言 .每 一 个 标签 均 可 以 使 用 ID= "ID 名 " 
的 形式 对 ID 属性 进行 名 称 的 指派 。 
在 定义 ID 选择 器 时 ,要 在 ID 名 称 前 面 加 一 个 “# ”号 。 例 如 ,以 下 为 网 页 中 的 层 定义 了 
样式 。 
#apDivl { 
position:absolute; 
left :37px; 
top:12px; 
width:137px; 
height:135px; 
z- index:1; 
} 
然后 只 需要 在 层 (div) 标 签 中 设置 ID 属性 为 "apDiv1”, 该 层 就 具有 了 以 上 样式 。 设 置 
完 的 层 HTML 代码 如 下 。 
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<div id= "apDivl"></div> 


3. 标签 选择 器 
标签 选择 器 也 称 标 记 选 择 器 ,一 个 HTML 页 面 由 很 多 不 同 的 标签 组 成 ,标签 选择 器 的 
CSS 样式 能 让 页 面 中 的 同一 标签 保持 相同 样式 。HTML 中 的 每 个 标签 都 有 默认 的 样式 , 标 
签 选择 器 的 主要 作用 是 提供 重新 定义 HTML 元 素 样式 的 方法 。 例 如 二 p 二 选择 器 可 以 声 
明文 档 中 的 所 有 二 p 二 标签 的 样式 风格 。HTML 中 的 所 有 标签 都 可 以 作为 标签 选择 器 , 通 
过 标签 选择 器 可 以 快速 改变 网 页 的 外 观 样式 。 
例如 ,以 下 为 给 二 p 二 标签 定义 的 样式 。 
pl 
font -family: "宋体"; 
font — size: 24px; 
color: #FF0000; 
} 


以 上 样式 定义 文档 中 的 p 标签 的 样式 为 “字体 为 宋体 ,字号 为 24px, 颜 色 为 红色 ”。 应 
用 该 样式 的 页 面 中 的 所 有 p 标签 都 将 具有 "字体 为 宋体 ,字号 为 24px, 颜 色 为 红色 ”的 样式 。 

4. 关联 选择 器 

该 选择 器 可 定义 以 上 三 种 选择 器 样式 和 链接 的 4 种 样式 a:link、a:visited、a:hover 和 
asactive。 此 外 ,还 可 对 选择 器 进行 集体 和 谍 套 声明 。 


知识 4 CSS 的 使 用 方式 


CSS 按 其 使 用 位 置 的 不 同 ,主要 分 为 以 下 三 种 类 型 : 行内 样式 表 (Inline Style Sheet)、 
内 符 样 式 表 (Internal Style Sheet) 和 外 部 样式 表 (External Style Sheet) 。 

1. 行内 样式 表 

行内 样式 表 也 叫 内 联 样式 表 , 行 内 样式 定义 在 HTML 标签 的 style 属性 中 ,只 对 所 在 
标签 有 效 。 使 用 行内 样式 失去 了 样式 表 的 优势 ,这 样 就 将 内 容 和 外 观 形 式 混淆 在 一 起 了 ,一 
般 这 种 方法 在 个 别 元 素 需 要 改变 样式 时 使 用 。 

例如 ,给 一 个 段落 添加 样式 ,代码 如 下 。 


<Pp style = "background— color: #0000FF; color: #FF0000; font - size:24px; "> 这 是 行内 样式 </p> 


行内 样式 是 最 为 简单 的 CSS 使 用 方法 ,但 由 于 需要 为 每 一 个 标签 设置 style 属性 ,后 期 
维护 成 本 很 高 ,而 且 网 页 代码 容易 过 于 爱 肿 ,因此 不 推荐 使 用 。 

2. 内 嵌 样 式 表 

内 髓 样式 表 也 叫 内 部 样式 表 , 内 嵌 样 式 表 使 用 二 style 二 二 /style 二 标签 在 head 区 域内 
定义 样式 ,只 对 所 在 的 网 页 有 效 , 可 针对 具体 页 面 进行 具体 调整 ,以 下 为 内 艇 样式 表 。 


x, 


<style type= "text/css"> 

< 

#apDivl { 
position:absolute; 
left :37px; 
top:12px; 
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写 


width:137px; 
height:135px; 
z— index:1; 

} 

= 让 

</style> 


3. 外 部 样式 表 

外 部 样式 表 可 以 集中 控制 和 管理 多 个 网 页 的 格式 和 布局 ,省 去 了 对 这 些 网 页 的 每 个 标 
签 都 要 进行 格式 规定 的 麻烦 。 外 部 样式 表 将 CSS 写成 一 个 后 级 为 ". css" 的 外 部 CSS 文件， 
在 HTML 文档 头 中 通过 链接 或 导入 的 方式 引用 该 文件 进行 样式 控制 。 

第 一 种 是 通过 链接 的 方式 导入 。 

这 种 导 和 方式 会 在 二 head 之 二 /head> 标 签 内 使 用 二 link 之 标签 将 样式 表 文 件 链接 到 
HTML 文件 内 ,如 二 link href 王 "global. css" rel=="stylesheet" type 一 "text/css" /二 。 

第 二 种 是 通过 导入 方式 导入 外 部 样式 表 。 

这 种 导入 方式 会 在 二 head 二 一 /head 二 标签 内 添加 一 对 一 style 二 一 /style 二 标签 ,然后 
通过 @import 方式 导入 外 部 样式 表 , 完 整 代码 如 下 所 示 。 

< style type = "text/css"> 

十 

@ import URL("global. css"); 


-—> 
</style> 


通过 @import 方式 导入 外 部 样式 表 时 ,在 HTML 文件 初始 化 时 ,会 被 导入 到 HTML 
文件 内 ,作为 文件 的 一 部 分 ,类 似 内 散 样 式 表 效果 。 推 荐 使 用 链接 的 方式 添加 外 部 样式 表 。 


知识 5 CSS 选择 器 的 蔡 套 与 继承 


在 CSS 选择 器 中 ,还 可 以 通过 和 骨 套 的 方式 进行 组 合 使 用 ,页 面 中 标签 庶 套 定义 的 代码 
如 下 所 示 , 其 规则 为 标签 名 ID 名 或 类 名 后 空格 再 加 下 一 级 标签 名 。 


pat 
font - family: "宋体 " 
font — size: 24px; 
color: #F00; 
text — decoration: none; 
} 
#bot af{ 
font -family: "隶书 "; 
font — size: 18px; 
color: #0F0; 
text ~ decoration: underline; 
.bot af 
font 一 family: "黑体 "; 
font — size: 16px; 
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& 


color: #00F; 
text — decoration: overline; 


} 


以 上 样式 分 别 在 p、#bot 和 . bot 三 个 标签 下 定义 了 超 链接 (标签 a) 的 样式 ,这 样 就 可 以 
实现 网 页 样式 的 分 块 控制 。 


知识 6 脚本 语言 简介 


脚本 语言 实际 上 就 是 一 种 介 于 高 级 语言 和 原型 语言 之 间 的 编程 语言 , 它 本 身 并 不 能 直 
接 执行 ,但 是 它 可 以 嵌入 在 HTML 中 执行 。 现 在 流行 的 脚本 语言 有 JavaScript 和 
VBScript。 

JavaScript 和 VBScript 作为 两 种 不 同 的 脚本 语言 ,各 有 各 的 特点 。JavaScript 是 一 种 
由 Netscape 的 LiveScript 发 展 而 来 的 客户 端 脚本 语言 ,JavaScript 最 初 是 受 Java 启发 而 开 
始 设计 的 ,因此 它 在 语法 上 与 Java 有 类 似 之 处 ,一 些 名 称 和 命名 规范 也 借 自 Java, 继 承 了 
Java 语言 许多 方面 的 内 容 , 在 风格 上 和 C++ 等 也 很 相似 。VBScript 脚本 语言 则 是 在 
Microsoft 的 Visual Basic(VB) 语 言 的 基础 上 建立 起 来 的 , 它 的 基本 语法 和 VB 兼容 , 远 没 
有 JavaScript 那样 灵活 。 

VBScript 脚本 语言 所 支持 的 对 象 没 有 JavaScript 丰富 ,特别 是 Netscape Navigator 4.0 
和 Internet Explorer 4. 0 都 对 JavaScript 对 象 做 了 补充 ,使 得 用 户 可 以 很 容易 创建 一 个 动 
态 的 页 面 。VBScript 在 这 方面 要 明显 落后 于 JavaScript。 现 在 只 有 Internet Explorer 支持 
VBScript, 另 一 著名 的 浏览 器 Netscape Navigator 并 不 支持 VBScript, 这 也 增加 了 VBScript 
的 局 限 性 。 当 然 Microsoft 公司 对 VBScript 做 了 非常 好 的 支持 ,无 论 从 客户 端 和 浏览 器 IE 
还 是 服务 器 端的 IIS( 微 软 自 己 开发 的 Web 服务 器 )。 在 VBScript 中 可 以 使 用 ActiveX 控 
件 , 在 服务 器 端的 Active Server Pages (ASP) 中 大 量 地 使 用 了 VBScript, 这 些 都 是 
JavaScript 所 不 能 做 到 的 。 


知识 7 ” VBScript 数据 类 型 


与 C/C++ 中 有 整 型 . 浮 点 型 和 字符 型 等 数据 类 型 不 同 ,VBScript 只 有 一 种 数据 类 型 , 称 
为 Variant。Variant 是 一 种 特殊 的 数据 类 型 ,根据 使 用 的 方式 , 它 可 以 包含 不 同类 别 的 信 
息 。 因 为 Variant 是 VBScript 中 唯一 的 数据 类 型 ,所 以 它 也 是 VBScript 中 所 有 函数 的 返回 
值 的 数据 类 型 。 

最 简单 的 Variant 可 以 包含 数字 或 字符 串 信息 。Variant 用 于 数字 上 下 文 时 作为 数字 
处 理 , 用 于 字符 串 上 下 文 时 作为 字符 串 处 理 。 这 就 是 说 ,如 果 使 用 看 起 来 像 是 数字 的 数据 ， 
则 VBScript 会 假定 其 为 数字 并 以 适用 于 数字 的 方式 处 理 。 与 此 类 似 , 如 果 使 用 的 数据 只 可 
能 是 字符 串 , 则 VBScript 将 按 字符 串 处 理 。 当 然 ,也 可 以 将 数字 包含 在 引号 “*"” 中 使 其 成 
为 字符 串 。 

除 简单 数字 或 字符 串 以 外 ,Variant 可 以 进一步 区 分 数值 信息 的 特定 含义 。 例 如 使 用 
数值 信息 表示 日 期 或 时 间 ,此 类 数据 在 与 其 他 日 期 或 时 间 数 据 一 起 使 用 时 ,结果 也 总 是 表示 
为 日 期 或 时 间 。 当 然 , 从 Boolean 值 到 浮 点 数 ,数值 信息 是 多 种 多 样 的 ,Variant 包含 的 数值 
信息 类 型 称 为 子 类 型 。 大 多 数 情 况 下 ,可 将 所 需 的 数据 放 进 Variant 中 ,而 Variant 也 会 按 
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照 最 适用 于 其 包含 的 数据 的 方式 进行 操作 。 
表 7-1 显示 了 Variant 所 包含 的 数据 子 类 型 。 
表 7-1 Variant 包含 的 数据 子 类 型 


子 类 型 描 述 
Empty 未 初始 化 的 Variant。 对 于 数值 变量 , 值 为 0; 对 于 字符 串 变量 , 值 为 零 长 度 字 符 串 ("") 
Null 不 包含 任何 有 效 数 据 的 Variant 
Boolean 包含 True 或 False 
Byte 包含 0 一 255 之 间 的 整数 
Integer 包含 一 32 768 一 32 767 之 间 的 整数 
Currency 一 922 337 203 685 477. 5808 一 922 337 203 685 477. 5807 
Long 包含 一 2 147 483 648 一 2 147 483 647 之 间 的 整数 
Single 包含 单 精度 浮 点 数 ,负数 范围 为 一 3.402 823E38 一 一 1.401 298E 一 45, 正 数 范围 为 
1.401 298E 一 45 一 3. 402 823E38 
Double 包含 双 精 度 浮 点 数 ,负数 范围 为 一 1.797 693 134 862 32E308 一 一 4. 940 656 458 412 47E 一 


324, 正 数 范围 为 4.940 656 458 412 47E 一 324 一 1.797 693 134 862 32E308 
Date (Time) ”包含 表示 日 期 的 数字 ,日 期 范围 从 公元 100 年 1 月 1 日 到 公元 9999 年 12 月 31 日 


String 包含 变 长 字符 串 , 最 大 长 度 可 为 20 亿 个 字符 
Object 包含 对 象 
Error 包含 错误 号 


知识 8 ” ”VBScript 运算 符 


VBScript 有 一 套 完整 的 运算 符 , 包 括 算术 运算 符 .连接 运算 符 、 比 较 运算 符 .多 辑 运算 
符 和 赋值 运算 符 , 它 们 的 优先 级 由 高 到 低 。 根 据 运算 操作 数 的 个 数 , 可 以 分 为 单 目 运算 符 和 


双 目 运算 符 。 
由 常量 、 变 量 、 函 数 和 运算 符 组 合 起 来 可 以 形成 表达 式 。 一 个 表达 式 有 一 个 值 ,它们 等 
于 计算 表达 式 所 得 结果 的 值 。 


当 表 达 式 包含 多 个 运算 符 时 ,将 按 预 定 顺 序 计算 每 一 部 分 ,这 个 顺序 被 称 为 运算 符 优先 
级 。 可 以 使 用 括号 越过 这 种 优先 级 顺序 ,强制 首先 计算 表达 式 的 某 些 部 分 。 运 算 时 ,总 是 先 
执行 括号 中 的 运算 符 ,然后 再 执行 括号 外 的 运算 符 。 但 是 ,在 括号 中 仍 要 遵循 标准 运算 符 的 
优先 级 。 

当 表 达 式 包含 多 种 运算 符 时 ,首先 计算 算术 运算 符 ,然后 计算 比较 运算 符 ,最 后 计算 逻 
辑 运算 符 。 所 有 的 比较 运算 符 的 优先 级 相同 , 即 按照 从 左 到 右 的 顺序 计算 比较 运算 符 。 

1. 算术 运算 符 

VBScript 中 有 如 下 算术 运算 符 。 

加 法 运算 符 十 : 双 目 运算 ,如 a 十 b、5 十 4. 3 等 。 

减法 运算 符 一 : 双 目 运算 ,如 a 一 b、5 一 4.3 等 。 

乘法 运算 符 * : 双 目 运算 ,如 axb、5*4.3 等 。 

除法 和 整除 运算 符 / 和 \ : 双 目 运算 ,两 者 的 区 别 为 浮 点 除法 运算 符 “/” 用 于 两 个 数值 
相 除 并 返回 浮 点 数 表示 的 结果 ,如 1/4 二 0.25。 整 除 运算 符 "\” 用 于 两 个 数 相 除 并 返回 以 整 
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数 形式 表示 的 结果 ,在 整数 除法 操作 前 ,数值 表达 式 四 舍 五 入 为 整 型 或 长 整 型 ,然后 再 进行 
运算 ,如 ]\4 王 0、.20\3 王 6。 

求 余 运算 符 Mod: 双 目 运算 ,用 于 两 个 数值 相 除 并 返回 其 余数 ,如 20 Mod 3==2、5 Mod 
2. 6 一 2 等 。 该 运算 符 在 操作 时 采用 整除 除法 求 余 策略 , 即 浮 点 数 四 舍 五 人 为 整数 后 再 进行 
运算 


1 


六 


求 宕 运算 符 “: 求 寡 运算 符 为 双 目 运算 符 , 如 a^3, 表 示 a 的 3 次 方 。 

负数 运算 符 一 : 负数 运算 符 为 单 目 运算 符 , 如 一 a\ 一 5。 

算术 运算 符 的 优先 级 为 : 求索 运算 符 ^ 二 负数 运算 符 一 > 乘法 运算 符 x 和 浮 点 数 除 
法 / > 整除 运算 符 \ > 求 余 运算 符 Mod > 加 法 运算 符 十 和 减法 运算 符 一 。 


2. 连接 运算 符 

连接 运算 符 & 用 于 强制 两 个 表达 式 进行 字符 串 连 接 , 为 双 目 运算 符 。 例 如 : 
"ASP"&" 运 算 符 " 结果 为 : "ASP 运算 符 " 

"ASP"& "is easy to "&"learn" 结果 为 : "ASP is easy to learn" 


虽然 也 可 以 使 用 “十 "运算 符 连接 两 个 字符 串 , 但 是 建议 使 用 *&" 运 算 符 进行 字符 串 的 
连接 ,因为 “十 ”也 可 表示 算术 运算 的 加 法 ,容易 引起 混淆 。 

3. 比较 运算 符 

VBScript 中 有 以 下 7 个 比较 运算 符 。 

三 ; 等 于 。 

一 二 : 不 等 于 。 

二 : 小 于 。 
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到 三 : 小 于 等 于 。 

> 一 : 大 于 等 于 。 

Is: 对 象 引用 比较 。 

例如 : 


atb>c 


7 个 比较 运算 符 都 为 双 目 运算 符 ,它们 的 优先 级 相同 。 前 6 个 比较 运算 符 与 其 他 语言 
中 的 作用 相同 ,其 结果 为 True 或 False。Is 运算 符 是 对 象 引 用 比较 运算 符 , 它 并 不 比较 对 
象 或 对 象 的 值 ,而 只 是 进行 检查 、 判 断 两 个 对 象 引用 是 否 引 用 同一 个 对 象 。 

4. 逻辑 运算 符 

VBScript 中 提供 了 以 下 6 个 逻辑 运算 符 。 

Not: 非 运算 , 单 目 运算 符 .作用 是 取 反 ,结果 由 真 变 成 假 或 由 假 变 成 真 。 

And: 人 逻辑 与 运算 , 双 目 运算 符 , 当 且 仅 当 两 个 表达 式 的 值 均 为 真 时 ,结果 为 真 ,否则 
为 假 。 

Or: 逻辑 或 运算 , 双 目 运算 符 .两 个 表达 式 的 逻辑 值 只 要 有 一 个 为 真 则 结果 为 真 , 当 上 且 
仅 当 两 个 表达 式 都 为 假 时 ,结果 为 假 。 

Xor: 人 逻辑 异 或 运算 , 双 目 运算 符 ,两 个 表达 式 的 逻辑 值 相 同 ( 均 为 真 或 均 为 假 时) ,结果 
为 假 ,否则 结果 为 真 。 
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Eqv: 逻辑 等 价 运算 , 双 目 运算 符 ,两 个 表达 式 的 逻辑 值 相同 ( 均 为 真 或 均 为 假 时 ) ,结果 
为 真 ,否则 结果 为 假 。 其 结果 刚好 与 Xor 相反 。 

Imp: 逻辑 隐 含 运算 , 双 目 运算 符 , 当 且 仅 当 第 一 个 表达 式 为 真 , 同 时 第 二 个 表达 式 为 假 
时 ,结果 为 假 ,否则 为 真 。 

它们 的 优先 级 顺序 为 : Not 字 And 二 Or>Xor>Eqv 二 Imp。 

例如 a 二 3、b 二 4、c 三 5, 根据 运算 符 的 规则 和 优先 级 顺序 ,有 如 下 运算 结果 。 

Not(a 二 b) : 结果 为 真 。 

a 之 b And b>c: 结果 为 假 。 

a 十 b<7 Or b>c: 结果 为 假 。 

a>>b Xor b>c: 结果 为 假 。 

a 十 b> 之 c Eqv b>1: 结果 为 真 。 

a>>b Imp c 二 0: 结果 为 真 。 

5. 赋值 运算 符 

赋值 运算 符 为 “==”, 使 用 该 运算 符 可 以 将 指定 的 某 个 表达 式 的 值 赋 给 某 个 变量 。 创 建 
如 下 形式 的 表达 式 给 变量 赋值 : 变量 在 “二 "左边 ,要 赋 的 值 在 "二 ”右边 。 例 如 : 


a=20 
赋值 表达 式 的 优先 级 最 低 ,赋值 表达 式 的 功能 是 计算 表达 式 的 值 再 赋予 左边 的 变量 。 
知识 9 ” VBScript 选择 与 循环 语句 


1. 控制 程序 执行 

使 用 条 件 语句 和 循环 语句 可 以 控制 脚本 的 流程 。 使 用 条 件 语 句 可 以 编写 进行 判断 和 重 
复 操作 的 VBScript 代码。 在 VBScript 中 可 使 用 以 下 条 件 语句 : 

If…Then…Else 语句 。 

Select Case 语句 。 

2. If…Then 结构 

要 在 条 件 为 真 时 运行 单行 语句 ,可 使 用 If 的 单行 语法 。 例 如 : 


If Time>#6:00:00pm# Then document.write(" 有 晚上 好 !") 


3. If…Then…Else 结构 
I…Then…Else 是 I…Then 语句 的 扩展 ,用 在 条 件 为 真 时 执行 某 一 代码 块 ,条 件 为 假 
时 执行 另 一 代码 块 。 例 如 : 


mon = Month(Date) 
document. write( "现在 是 "smong" 月 <br >") 
If mon<= 6 Then 

document. write(" 现 在 是 上 半年 <br>") 
Else 

document. write(" 现 在 是 下 半年 <br>") 
End If 


4. If…Then…Elseif 结构 
If…Then… Elseif 语句 的 一 种 变形 允许 从 多 个 条 件 中 选择 , 即 添加 Elseif 子 句 以 扩充 


07 模 块 ”CSS 和 ASP 脚 本 语言 


Jf…Then…Else 语句 的 功能 ,使 用 户 可 以 控制 基于 多 种 可 能 的 程序 流程 。 


mon = Month(Date) 
document. write(" 现 在 是 "Snmon&g" 月 <br>") 
If mon<= 3 then 

document. write(" 现 在 是 第 1 季度 <br>") 
Elseif mon<=6 then 

document. write(" 现 在 是 第 2 季度 <br>") 
Elseif mon<=9 then 


document. write(" 现 在 是 第 3 季度 <br>") 
Elseif mon<= 12 then 


document. write(" 现 在 是 第 4 季度 <br>") 
End If 
可 以 添加 任意 多 个 Elseif 子 句 以 提供 多 种 选择 ,但 使 用 多 个 Elseif 子 句 经 常会 变 得 很 
累 歼 。 在 多 个 条 件 中 进行 选择 的 更 好 方法 是 使 用 Select Case 语句 。 
5. 使 用 Select Case 进行 判断 
Select Case 结构 提供 了 If…Then…Elseif 结构 的 一 个 变通 形式 ,可 以 从 多 个 语句 块 中 
选择 执行 其 中 的 一 个 。Select Case 语句 提供 的 功能 与 1…Then…Elseif 语句 类 似 ,但 是 可 
以 使 代码 更 加 简练 易 读 。 
Select Case 结构 在 其 开始 处 使 用 一 个 只 计算 一 次 的 简单 测试 表达 式 ,表达 式 的 结果 将 
与 结构 中 每 个 Case 的 测试 条 件 值 比较 。 如 果 匹 配 , 则 执行 与 该 Case 关联 的 语句 块 ,然后 转 
而 执行 End Select 之 后 的 其 他 语句 。 如 果 测 试 条 件 的 值 与 所 有 的 Case 后 的 表达 式 值 均 不 
相同 时 , 则 执行 Case Else 后 面 的 语句 块 。 当 然 Case Else 的 语句 块 也 可 以 省 略 。 当 某 一 测 
试 条 件 的 值 有 多 个 时 ,可 以 用 逗号 隔 开 这 些 值 。 
mon = Month(Date) 
document. write(" 现 在 是 "&mon&" 月 < br >") 
Select Case mon 
Case 1,2,3 
document. write(" 现 在 是 第 1 季度 < br >") 
Case 4,5,6 
document. write(" 现 在 是 第 2 季度 < br >") 
Case 7,8,9 
document . write(" 现 在 是 第 3 季度 < br >") 
Case 10,11,12 
document. write(" 现 在 是 第 4 季度 <br>") 
Case Else 
document. write(" 其 他 <br>") 
End Select 


请 注意 Select Case 结构 只 计算 开始 处 的 一 个 表达 式 ( 只 计算 一 次 ), 而 If*…Then… 
Elseif 结构 计算 每 个 Elseif 语句 的 表达 式 ,这 些 表达 式 可 以 各 不 相同 。 仅 当 每 个 Elseif 语句 
计算 的 表达 式 都 相同 时 , 才 可 以 使 用 Select Case 结构 代替 1f…Then…Elseif 结构 。 

6. 使 用 循环 重复 执行 代码 

循环 用 于 重复 执行 一 组 语句 。 循 环 可 分 为 三 类 : 一 类 在 条 件 变 为 False 之 前 重复 执行 
语句 ,一 类 在 条 件 变 为 True 之 前 重复 执行 语句 , 另 一 类 按照 指定 的 次 数 重 复 执 行 语 句 。 
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在 VBScript 中 可 使 用 下 列 循环 语句 。 

Do…Loop: 当 ( 或 直到 ) 条 件 为 True 时 循环 。 

While…Wend: 当 条 件 为 True 时 循环 。 

For…Next: 指定 循环 次 数 ,使 用 计数 器 重复 运行 语句 。 

For Each…Next: 对 于 集合 中 的 每 项 或 数组 中 的 每 个 元 素 , 重 复 执行 一 组 语句 。 

7. 使 用 Do 循环 

可 以 使 用 Do…Loop 语句 多 次 (次 数 不 定 ) 运 行 语句 块 , 当 条 件 为 True 时 或 条 件 变 为 


True 之 前 ,重复 执行 语句 块 。 


8. 当 条 件 为 True 时 重复 执行 语句 
While 关键 字 用 于 检查 Do…Loop 语句 中 的 条 件 。 有 两 种 检查 条 件 的 方式 : 在 进入 循 


环 之 前 检查 条 件 ,或 者 在 循环 至 少 运行 完 一 次 之 后 检查 条 件 。 如 下 面 两 段 代 码 都 实现 了 计 
算 1 一 10 之 间 10 个 数 的 累加 运算 。 


Do While…Loop 结构 代码 : 


dim iy sum 
i=1 
sum=0 


Do While i<=10 
document. write( i&"< br >") 
sum= sum+i 
i=i+1 
Loop 
document. write("1 到 10 累加 之 和 为 "&sum&"< br >") 


Do…Loop While 结构 代码 : 


dim i, sum 
i=1 
sum=0 
Do 


document. write( i&"< br >") 
Sum = sum+ i 
i=i+1 
Loop While i<=10 
document.write("1 到 10 累加 之 和 为 "&sum&"< br >") 


9. 重复 执行 语句 直到 条 件 变 为 True 
Until 关键 字 用 于 检查 Do…Loop 语句 中 的 条 件 。 有 两 种 检查 条 件 的 方式 : 在 进入 循 


环 之 前 检查 条 件 ,或 者 在 循环 至 少 运行 完 一 次 之 后 检查 条 件 。 只 要 条 件 为 False, 就 会 进行 
循环 。 如 下 面 两 段 代码 同样 都 实现 了 计算 1 一 10 之 间 10 个 数 的 累加 运算 。 


Do Until…Loop 结构 代码 : 


dim i,sum 
1=1 
sum=0 
Do Until i>10 
document. write( ig"< br >") 
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Sum = sum+i 
i=i+1 
Loop 
document. write("1 到 10 累加 之 和 为 "&sum&"< br >") 


Do…Loop Until 结构 代码 : 


dim i, sum 
i=1 
Sum= 0 
Do 


document. write( i&"< br >") 
Sum = sum+i 
i=i+1 
Loop Until i>10 
document.write("1 到 10 累加 之 和 为 "&sum&g"< br >") 


10. 使 用 While…Wend 
While…Wend 语句 是 为 那些 熟悉 其 用 法 的 用 户 提 供 的 ,如 果 While 条 件 为 真 , 则 执行 
循环 体 中 的 语句 。 例 如 用 While… Wend 循环 求 1 一 10 累加 之 和 的 代码 如 下 所 示 。 


dim i, sum 
i=1 
sum=0 
While i<=10 
document. write( i&"< br >") 
Sum = sum+i 
EF 
Wend 
document. write("1 到 10 累加 之 和 为 "&sum&"< br>") 


但 由 于 While… Wend 语句 缺少 灵活 性 ,所 以 建议 最 好 使 用 Do…Loop 语句 。 
11. 使 用 For…Next 
For… Next 语句 用 于 将 语句 块 运行 指定 的 次 数 。 在 循环 中 使 用 计数 器 变量 ,该 变量 的 
值 随 每 一 次 循环 增加 或 减少 。 例 如 ,下 面 的 示例 代码 重复 执行 10 次 ,For 语句 指定 计数 器 
变量 i 及 其 起 始 值 与 终止 值 ,Next 语句 使 计数 器 变量 每 次 加 1 。 
dim i, sum 
sum=0 
For i=1 to10 
document. write( i&"< br >") 
Sum = sum+ i 
Next 
document. write("1 到 10 累加 之 和 为 "&sum&"< br >") 


关键 字 Step 用 于 指定 计数 器 变量 每 次 增加 或 减少 的 值 。 在 下 面 的 示例 中 ,计数 器 变量 
i 每 次 加 2。 循 环 结束 后 ,sum 的 值 为 2.4.6.8 和 10 的 总 和 。 

dim i,sum 

sum=0 

For i=2 to 10 Step 2 
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福 


document. write( i&"< br >") 
Sum = sum+i 
Next 
document. write(" 总 和 为 "&sum&"< br >") 


要 使 计数 器 变量 递减 ,可 将 Step 设 为 负 值 。 此 时 计数 器 变量 的 终止 值 必 须 小 于 起 始 


值 。 在 下 面 的 示例 中 ,计数 器 变量 i 每 次 减 2。 循 环 结束 后 ,sum 的 值 为 10、8、6、4 和 2 的 
总 和 。 


dim iv sum 
Sum= 0 
For i=10 to2 Step -2 
document. write( i&"< br >") 
Sum = sum+i 
Next 
document. write(" 总 和 为 "&sum&g"< br>") 


12. 使 用 For Each…Next 
For Each…Next 循环 与 For…Next 循环 类 似 。For Each…Next 不 是 将 语句 运行 指定 


的 次 数 ,而 是 对 于 数组 中 的 每 个 元 素 或 对 象 集合 中 的 每 一 项 重复 一 组 语句 。 这 在 不 知道 集 
合 中 元 素 的 数目 时 非常 有 用 。 例 如 ,以 下 代码 将 输出 数组 subjects 中 的 所 有 元 素 。 


Dim subjects(6) 

subjects(0) = "语文 " 

subjects(1) = "数学 " 

subjects(2) = "英语 " 

subjects(3) = "物理 " 

subjects(4) = "化 学 " 

subjects(5) = "生物 " 

For Each subject in subjects 
document. write(subject&"<br>") 

Next 


13. 循环 的 其 套 
一 个 循环 体内 又 包含 另 一 个 完整 的 循环 结构 , 称 为 循环 的 嵌 套 或 多 重 循环 。 单 循环 可 


以 解决 一 些 简单 的 问题 ,但 有 时 许多 复杂 问题 则 必须 用 两 层 ,甚至 多 层 循环 来 解决 。 多 重 循 
环 的 使 用 与 单一 循环 完全 相同 ,但 应 注意 内 、 外 层 循环 条 件 的 变化 。 同 时 要 注意 多 重 循环 中 
各 循环 必须 完整 包含 ,相互 之 间 绝 对 不 允许 有 交叉 现象 。 


例如 ,下 面 的 代码 可 以 实现 在 网 页 中 输出 九 九 乘法 表 。 


For i=1to9 
For j=1toi 
document. write(ig&" * "&j&" = "&ix j&"gnbsp;") 
Next 
document. write("< br >") 
Next 


14. 退出 循环 
Exit Do 语句 用 于 退出 Do…Loop 循环 。 因 为 通常 只 是 在 某 些 特殊 情况 下 才 退 出 循环 
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(例如 要 避免 死 循 环 ), 所 以 可 在 f…Then…Else 语句 的 True 语句 块 中 使 用 Exit Do 语句 。 
如 果 条 件 为 False, 循 环 将 照常 运行 。 
Exit For 语句 用 于 退出 For…Next 循环 。 
例如 下 面 的 代码 分 别 用 来 退出 Do…Loop 和 For…Next 循环 。 
用 Exit Do 语句 退出 Do…Loop 循环 : 
dim i, sum 
i=1 
sum=0 
Do 
document. write( i&"< br >") 
Sum = sum+i 
i=i+1 
if i>5 then Exit Do 
Loop Until i>10 
document. write("1 到 10 累加 之 和 为 "&sumg"< br >") 


用 Exit For 语句 退出 For… Next 循环 : 


dim i, sum 
sum=0 
For i=1 to10 
document. write( i&"< br >") 
if i>5 then Exit For 
Sum = sum+i 
Next 
document. write("1 到 10 累加 之 和 为 "&sum&"< br >") 


知识 10 ”VBScript 过 程 与 函数 


在 VBScript 中 ,过程 被 分 为 两 类 : Sub 过 程 和 Function 过 程 。 两 者 的 区 别 是 Sub 过 程 
无 返回 值 ,而 Function 过 程 通过 函数 名 返回 特定 的 值 。 

1. Sub 过 程 

Sub 过 程 是 包含 在 Sub 和 End Sub 语句 之 间 的 一 组 VBScript 语句 ,执行 操作 但 不 返回 
值 。Sub 过 程 可 以 使 用 参数 (由 调用 过 程 传递 的 常数 .变量 或 表达 式 )。 即 使 Sub 过 程 无 任 
何 参数 ,Sub 语句 也 必须 包含 空 括号 ( )。Sub 过 程 声明 的 方法 如 下 : 

Sub 过 程 名 [( 形 参 1, 形 参 2，…)] 


过 程 代 码 
End Sub 


调用 Sub 过 程 的 语法 格式 如 下 : 

[Call] 过 程 名 [( 实 参 1, 实 参 2,…)] 

Call 为 可 选项 关键 字 。 如 果 指 定 此 关键 字 , 则 必须 用 括号 把 实 参 括 起 来 。 若 省 略 了 
Call 关键 字 ,必须 也 同时 省 略 两 边 的 括号 。 

例如 ,下 面 的 代码 定义 了 一 个 求 两 个 数 之 积 的 过 程 并 调用 该 过 程 。 
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Sub Multi(varl, var2) 


document. write(varl&" * "&var28&" = "&varl x var2) 
End Sub 
Call Multi(5,6) // 调 用 方法 1 
Multi 5,6 // 调 用 方法 2 


2. Function 过 程 


写 


Function 过 程 是 包含 在 Function 和 End Function 语句 之 间 的 一 组 VBScript 语句 。 


Function 过 程 与 Sub 过 程 类 似 , 但 是 Function 过 程 可 以 返回 值 ,可 以 使 用 参数 (由 调 


过 程 传递 的 常数 ,变量 或 表达 式 )。 即 使 Function 过 程 无 任何 参数 ,Function 语句 也 必须 包 

含 空 括号 ( )。Function 过 程 通过 函数 名 返回 一 个 值 , 这 个 值 是 在 过 程 的 语句 中 赋 给 函数 名 

的 ,返回 值 的 数据 类 型 总 是 Variant。 
Function 过 程 声明 的 语法 格式 如 下 : 


Function 函数 名 [ ( 形 参 1, 形 参 2,…)] 


函数 代码 
函数 名 = 返回 值 


End Function 


调用 Function 函数 的 一 般 格式 如 下 : 
变量 名 = 函数 名 [( 实 参 1, 实 参 2, …)] 
例如 ,上 面 定义 的 求 两 个 数 之 积 的 过 程 也 可 以 用 下 面 的 函数 实现 。 


Function Multi(varl, var2) 


Multi = varl x var2 
End Function 
myMul = Multi(5,8) 
document. write myMul 


知识 11 VBScript 常用 系统 函数 


1. 日 期 时 间 函 数 


利用 日 期 和 时 间 函 数 可 以 方便 地 得 到 各 种 格式 的 日 期 和 时 间 , 可 以 对 日 期 和 时 间 进 行 


各 种 操作 。 常 见 的 日 期 和 时 间 函 数 如 表 7-2 所 示 。 


表 7-2 VBSeript 常用 的 日 期 和 时 间 函 数 


函 数 名 参数 说 明 功能 描述 
Date(O) 无 返回 系统 当前 的 日 期 
Time() 无 返回 系统 当前 的 时 间 
Now() 无 返回 系统 当前 的 日 期 和 时 间 值 
Hour(date) date 表示 任意 有 效 的 日 期 值 返回 date 中 的 小 时 
Minute( date) date 表示 任意 有 效 的 日 期 值 返回 date 中 的 分 钟 
Second(date) date 表示 任意 有 效 的 日 期 值 返回 date 中 的 秒 
WeekDay( date) date 表示 任意 有 效 的 日 期 值 返回 date 指定 的 日 期 的 星期 
Year(date) date 表示 任意 有 效 的 日 期 值 返回 date 中 的 年 
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续 表 
函 数 名 参数 说 明 功能 描述 
Month(date) date 表示 任意 有 效 的 日 期 值 返回 date 中 的 月 
Day( date) date 表示 任意 有 效 的 日 期 值 返回 date 中 的 日 


DateAdd(interval, 


number,date) 


DateDiff (interval, 
dl,d2) 


例如 ,利用 表 7-2 中 的 相关 时 间 和 日 期 函数 计算 下 个 月 的 今天 是 星期 几 , 实 现代 码 


如 下 。 


interval, 必 选项 ,表示 要 添加 的 时 间 间 隔 类 
型 ,如 yyyy 表示 年 ,m 表示 月 ,d 表示 日 等 。 
number, 必 选项 ,表示 要 添加 的 时 间 间 隔 的 
个 数 。 数 值 表 达 式 可 以 是 正 数 (得 到 未 来 的 
日 期 ) 或 负数 (得 到 过 去 的 日 期 )。date, 必 选 
项 ,表示 要 计算 的 参考 日 期 或 时 间 

interval 参数 同上 。d1 和 d2, 必 选项 ,日 期 表 
达 式 ,表示 用 于 计算 的 两 个 日 期 


returnWeek = WeekDay( DateAdd("m", 1, now( ))) 
Select Case returnWeek 


Case "1" 


nextWeek = "星期 天 " 


Case "2" 


nextWeek = "星期 一 " 


Case "3" 


nextWeek = "星期 二 " 


Case "4" 


nextWeek = "星期 三 


Case "5" 


nextWeek = "星期 四 ” 


Case "6" 


nextWeek = "星期 五 " 


Case "7" 


nextWeek = "星期 六 " 


End Select 


document. write nextWeek 


2. 字符 串 处 理 函 数 


字符 串 处 理 函 数 可 以 实现 对 字符 串 的 各 种 处 理 , 简 化 程序 设计 ,提高 编程 效率 。 常 用 的 


字符 串 处 理 函数 如 表 7-3 所 示 。 
表 7-3 VBSeript 中 的 常用 字符 串 处 理 函数 


函 数 名 


参数 说 明 


返回 已 添加 指定 时 间 间 隔 的 日 期 


返回 两 个 日 期 之 间 的 时 间 间 隔 


功能 描述 


Len(string | varname) 


string: 任意 有 效 的 字符 串 表达 式 
varname: 任意 有 效 的 变量 名 


返回 字符 串 内 字符 的 数 
目 . 或 是 存储 一 变量 所 需 


如 果 参 数 string 或 varname 包含 Null, 则 返 ”的 字 节 数 


回 Null 
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续 表 
函 数 名 参数 说 明 功能 描述 
LTrim(string) string: 任意 有 效 的 字符 串 表达 式 去 掉 字符 串 左 边 、 右 边 或 
RTrim(string) 左右 两 边 的 空格 
Trim( string) 
Left(string,length) string: 任意 有 效 的 字符 串 表达 式 从 字符 串 左 边 或 右边 返回 
Right(Cstring ,length) length: 指明 要 返回 的 字符 数目 。 如 果 是 0， 指定 数目 的 字符 
返回 零 长 度 字符 串 〈""); 如 果 大 于 或 等 于 
string 参数 中 的 字符 总 数 , 则 返回 整个 字 
符 串 
Mid(string,start[ ,length]) ”string: 任意 有 效 的 字符 串 表 达 式 从 字符 串 中 返回 指定 数目 
start: string 中 被 提取 的 字符 部 分 的 开始 位 置 。 的 字符 


Split(string[ ,delimiter]) 


Replace(string ,strl , str2) 


length: 可 选项 ,要 返回 的 字符 数 

string: 任意 有 效 的 字符 串 表达 式 
delimiter: 可 选项 ,用 于 标识 子 字符 串 界 限 
的 字符 。 如 果 省 略 , 使 用 空格 (”") 作为 分 
隔 符 

string : 任意 有 效 的 字符 串 表 达 式 

strl: 任意 有 效 的 字符 串 表 达 式 

str2: 任意 有 效 的 字符 串 表达 式 


例如 ,如 果 从 其 他 页 面 中 传 来 了 以 下 参数 字符 串 : 
"username = zhansan&password = 123456&age = 31&salary = 3000&level = 3" 
为 了 拆 分 参数 字符 串 中 的 参数 ,可 以 使 用 下 面 的 代码 。 


str = "username = zhansan&password = 123456&age = 31&salary= 3000&level =3" 


arr= split(str,"&") 
For each para in arr 


document. write para&"< br >" 


arr2 = split(para," 


机 


for each para2 in arr2 


document. write "&nbsp; &nbsp; "&para2&"< br >" 


next 
Next 


3. 类 型 转换 函数 


根据 delimiter 把 字符 串 
string 拆 分 为 一 维 数组 


将 字符 串 string 中 的 strl 
全 部 替换 为 str2 


利用 类 型 转换 函数 ,在 必要 时 可 以 实现 强制 的 数据 类 型 转换 。 常 用 的 类 型 转换 函数 如 


表 7-4 所 示 。 


通过 表单 传递 数据 时 ,通常 在 处 理 表 单 时 所 得 到 的 数据 为 String 类 型 ,如 果 要 进行 一 
些 相关 运算 ,一般 需 要 进行 类 型 转换 。 例 如 .需要 将 两 个 表单 变量 的 值 进 行 算术 运算 , 则 在 
运算 前 需要 利用 CInt 函数 将 该 表单 变量 的 值 转换 为 Integer 类 型 。 下 面 的 代码 可 实现 两 个 


数字 字符 串 的 算术 运算 。 
strl="22" 
tr2="33" 


str3= CInt(strl) * Cint(str2) 
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表 7-4 VBScript 常用 的 类 型 转换 函数 


函 数 名 参数 说 明 功能 描述 
ClInt(expression) expression 参数 是 任意 有 效 的 表达 式 转换 为 Integer 类 型 
CDate( expression) expression 参数 是 任意 有 效 的 日 期 表达 式 ”转换 为 Date 类 型 
CStrCexpression) expression 参数 是 任意 有 效 的 表达 式 转换 为 String 类 型 
CBool(expression) expression 参数 是 任意 有 效 的 表达 式 将 表达 式 转换 为 Boolean 类 型 
CByte(expression) expression 参数 是 任意 有 效 的 表达 式 将 表达 式 转 换 为 Byte 类 型 
CCurCexpression) expression 参数 是 任意 有 效 的 表达 式 将 表达 式 转换 为 Currency 类 型 
CDbl(expression) expression 参数 是 任意 有 效 的 表达 式 将 表达 式 转换 为 Double 类 型 
CLng(expression) expression 参数 是 任意 有 效 的 表达 式 将 表达 式 转 换 为 Long 类 型 
CSng(expression) expression 参数 是 任意 有 效 的 表达 式 将 表达 式 转换 为 Single 类 型 
Oct(expression) expression 参数 是 任意 有 效 的 表达 式 将 表达 式 转 换 为 String 类 型 ,返回 
表示 八进制 的 字符 串 
Hex(expression) expression 参数 是 任意 有 效 的 表达 式 将 表达 式 转换 为 String 类 型 ,返回 
表示 十 六 进 制 的 字符 串 
Chr(expression) expression 参数 是 任意 有 效 的 表达 式 返回 与 指定 ANSI 字符 代码 相对 应 
的 字符 
Asc(expression) expression 参数 是 任意 有 效 的 表达 式 转换 为 Integer 类 型 ,返回 与 字符 串 
的 第 一 个 字母 对 应 的 ANSI 字符 
代码 


知识 12 _ VBScript 与 ASP 文件 的 结合 


在 ASP 文件 中 能 入 VBScript 脚本 有 两 种 方法 。 

1. 使 用 Script /Script ”标签 

VBScript 使 用 二 Script 二 标签 在 某 个 HTML 文档 中 插入 脚本 ,使 用 type 属性 或 者 
language 属性 来 选择 脚本 语言 。VBScript 代码 写 在 成 对 出 现 的 一 Script 之 二 /Script 之 标签 
之 间 。 

一 Script 二 标签 的 常用 属性 如 下 。 

type: 设 定 脚本 语言 的 类 别 , 如 text/ VBScript。 

language: 设 定 脚本 语言 的 名 称 ,如 VBScript。 

src: 引入 脚本 语言 定义 文件 的 URL 地 址 。 

runat: 指定 脚本 文件 运行 的 位 置 ,可 选 server( 服 务 器 端 ) 或 者 默认 为 客户 端 。 

runat 属性 确定 了 脚本 是 在 客户 端 还 是 在 服务 器 端 运行 。 如 果 用 户 仅仅 操作 不 涉及 服 
务 器 的 部 分 ,可 以 设 定 在 客户 端 执 行 , 则 不 需要 这 个 属性 ; 如 果 用 户 需要 脚本 在 服务 器 运 
行 ,一 定 要 加 上 runat 二 "server" 属 性 。 

例如 ,下 面 的 VBScript 代码 即 可 在 网 页 中 输出 相应 的 字符 串 ( 如 “这 里 是 VBScript 语 
言 代码 !1”)。 

< Script language = "VBScript" type= "text/VBScript"> 


document. write(" 这 里 是 VBScript 语言 代码 !") 
</Script > 
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到 Script 二 /Script 二 块 可 以 出 现在 HTML 页 面 的 任何 地 方 (body 或 head 部 分 之 
中 )。 然 而 最 好 将 所 有 的 一 般 目标 Script 代码 放 在 head 部 分 中 ,以 使 所 有 Script 代码 集中 
放置 。 这 样 可 以 确保 在 body 部 分 调用 代码 之 前 所 有 的 Script 代码 都 被 读 取 并 解释 。 

VBScript 也 可 以 用 在 窗 体 中 提供 内 部 代码 ,以 响应 窗 体 对 象 的 相关 事件 。 例 如 ,以 下 
网 页 代码 在 窗 体 中 嵌入 Script 代码 以 响应 窗 体 中 按钮 的 单 击 事件 。 


< html > 

< head> 

< meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> VBScript 单 击 事件 </title> 
< Script language = "VBScript" for = "bt1" event = "onClick" type = "text/VBScript"> 
下 

Msgbox(" 你 单 击 了 按钮 1") 

-一 和 
</Script> 
</head> 
<body> 
< input type = "button" name = "bt1” value = "按钮 " /> 
</body> 
</html > 


当 单 击 “ 按 钮 ”按钮 后 ,脚本 语言 弹出 一 个 信息 框 。 运 行 结 果 如 图 7-1 所 示 。 
习 vaseript 单 击 事件 


» 


© 日 - 国 国 冶 


地 址 0) 各 http:/1 ~ 贺 关 到 ” 府 演 > 


本 可 


全 本 地 Intranet 


图 7-1 VBScript 代码 运行 结果 


虽然 可 以 将 VBScript 代码 放 在 过 程 之 外 .Script 块 之 中 ,但 这 类 代码 仅 在 HTML 页 面 
加 载 时 执行 一 次 。 这 样 的 代码 通常 用 来 在 加 载 Web 页 面 时 初始 化 数据 或 动态 地 改变 页 面 
的 外 观 。 大 多 数 时 候 Script 代码 放置 在 Sub 或 Function 过 程 中 , 仅 在 其 他 代码 或 事件 调用 
时 执行 。 例 如 ,图 7-1 的 运行 结果 同样 可 以 用 下 面 的 代码 实现 。 


<html> 
<head> 
<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> VBScript 单 击 事件 </title> 
< Script language = "VBScript" type = "text/VBScript"> 
Ek 
function showMessage 
Msgbox(" 你 单 击 了 按钮 1") 
end function 
-—> 
</Script > 
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</head> 
<body> 
< input type = "button" name = "bt1l" value = "按钮 " onclick = "showMessage" /> 
</body> 
</html > 


上 面 的 代码 定义 了 过 程 showMessage, 并 在 按钮 <input 二 标签 的 onClick 事件 中 调用 ， 
脚本 被 嵌入 在 注释 标记 (二 !-- 和 -- 二 ) 中 。 这 样 当 不 能 识别 二 Script 二 标记 的 浏览 器 运行 该 
脚本 代码 时 ,会 将 代码 当 作 注 释 而 不 会 将 它 显示 在 浏览 器 中 。 

上 面 两 个 例子 的 代码 都 是 将 VBScript 脚本 运行 在 客户 端 ,如 果 要 将 脚本 运行 在 服务 器 
端 , 则 需要 设置 runat 属性 为 server。 如 下 面 的 代码 就 运行 在 服务 器 端 。 


<% (@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %> 

< html > 

<head > 

<meta http - equiv = "Content — Type" content = "text/html; charset = gb2312" /> 

<title> VBScript 运行 于 服务 器 端 </title> 

</head> 

<body> 

< Script language = "VBScript" runat = "server"> 
response. write(" 这 是 运行 在 服务 器 端的 代码 !") 

</Script > 

</body> 

</html > 


代码 运行 后 会 在 网 页 中 输出 一 个 字符 串 “ 这 是 运行 在 服务 器 端的 代码 1”"。 这 里 需要 注 
意 的 是 ,用 在 服务 器 端的 输出 语句 为 response. write, 而 客户 机 的 输出 语句 为 document. 
write。 

2. 使 用 % 和 % 

当 创建 ASP 网 页 时 ,默认 是 将 VBScript 作为 服务 器 端 编程 语言 ,把 VBScript 的 脚本 
集成 到 ASP 最 容易 的 方法 是 使 用 两 个 特殊 字符 二 % 和 % 二 。 使 用 二 Script 二 标签 与 使 用 
二 % 和 %% 志 来 限定 Script 脚本 语言 有 明显 的 区 别 。 使 用 二 Script 之 标签 包含 的 直接 脚本 会 
被 立即 执行 ,无 论 脚本 放置 在 ASP 的 任何 位 置 。 而 二 % 和 %% 二 是 标准 的 ASP 定 界 符 , 用 于 
将 包含 在 其 中 的 表达 式 的 结果 输出 到 浏览 器 。 

二 % 和 % 二 最 常用 的 使 用 方式 是 二 % 二 脚本 表达 式 % 二 >。 如 下 面 的 ASP 文件 用 于 在 
网 页 中 输出 当前 时 间 。 

<% @LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %> 

< html > 

< head> 

< meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 

<title > 输出 当前 时 间 </title> 

</head > 

< body> 

当前 时 间 是 : <% = now%> 

</body> 

</html > 
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程序 的 运行 结果 如 图 7-2 所 示 。 


池 输出 当前 时 间 - Windows Internet Erplorer 

文件 中 蝙 辑 查看 @)。 收 意 个) 工具 CD) 帮助 0 FE 
加 FE -昌国 因 的 记 扫 霖 去 收 ¥ 天 如 全 -总 团 " 3 回 
地 址 加 ) 策 http://1ocalhost/website_asp/chapter0T/now asp | 加 轩 到 入 丢 ” 


当前 时 间 是 ，2011-4-4 22:38:25 


图 7-2 用 ASP 代码 输出 服务 器 当前 时 间 
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1. JavaScript 标识 符 

标识 符 就 是 用 户 编 程 时 使 用 的 名 字 。jJavaScript 中 的 标识 符 包 括 关键 字 标识 符 和 用 户 
标识 符 。 其 中 关键 字 是 事先 定义 的 ,是 有 特别 意义 的 标识 符 , 有 时 又 叫 保留 字 。 用 户 关键 字 
是 用 户 在 程序 中 为 变量 .函数 等 取 的 名 字 。 一 般 情 况 下 用 户 标识 符 不 允许 取 关 键 字 标 识 符 。 

JavaScript 中 的 一 些 常 用 关键 字 有 : break, delete,function ,return,typeof, case,do,if， 
switch, var, catch, else, in, this, void, continue, false, instanceof, throw, while, debugger， 
finally,new,true,with.default,for,null,try。 在 编写 程序 的 时 候 一 般 不 要 取 变 量 名 、 子 数 
名 等 用 户 关键 字 为 这 些 。 

2. 常量 和 变量 

JavaScript 中 的 量 分 为 常量 和 变量 ,常量 有 时 也 叫做 字面 量 。JavaScript 中 的 常量 为 
4 种 基本 数据 类 型 。 分 别 为 : 数值 型 (分 为 整 型 和 实 型 )、 字 符 串 型 .布尔 型 和 null 型 。 

(1) 常量 

整 型 常量 : 整 型 常量 可 以 使 用 十 六 进 制 、 八 进 制 和 十 进 制 表示 。 

实 型 常量 : 实 型 常量 是 由 整数 部 分 加 小 数 部 分 表示 ,如 123. 11。 也 可 以 用 科学 记 数 法 
表示 : 2. 3E4( 表 示 2. 3X 10)。 

字符 串 型 常量 : 使 用 单 引号 (') 或 双 引 号 (") 引 起 来 的 一 个 或 几 个 字符 。 如 "IT love 
javaScript"、 "256" "abcd1234" "<hl>abcd 一 /hl>" 等 。 

布尔 型 常量 : 布尔 常量 只 有 True 或 False 两 种 状态 。 它 主要 用 来 说 明 或 代表 一 种 状 
态 或 标志 ,以 说 明 操 作 流程 。 

空 值 : JavaScript 中 有 一 个 空 值 null ,表示 什么 也 没有 。 

(2) 变量 

变量 的 主要 作用 是 存 取 数据 ,提供 存放 信息 的 容器 。 对 于 变量 必须 明确 变量 的 命名 、 变 
量 的 类 型 .变量 的 声明 及 变量 的 作用 域 。 声 明 一 个 变量 就 意味 着 向 系统 申请 了 一 块 内 存 空 
间 , 将 来 可 以 将 程序 中 的 数据 存储 到 这 块 内 存 空间 中 。 

在 为 变量 取 名 的 时 候 要 注意 以 下 两 点 。 

Qa 变量 名 只 能 以 字母 下划线 (_) 或 $ 开头, 不 能 以 数字 开头 。 变 量 名 中 不 能 有 空格 和 
除 下 划 线 、$ 等 符号 之 外 的 其 他 符号 。 如 a、_a、al、$abc123、_123 等 都 是 合法 的 变量 名 。 
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123、1a、\a 十 b、ab 等 都 是 不 合法 的 变量 名 。 

@ 不 能 使 用 JavaScript 中 的 关键 字 作 为 变量 。 在 JavaScript 中 定义 了 40 多 个 关键 字 ， 
这 些 关键 字 是 在 其 内 部 使 用 的 ,不 能 作为 变量 的 名 称 。 

在 JavaScript 中 的 变量 用 关键 字 var 来 进行 声明 。 例 如 var x,var y 分 别 定 义 了 两 个 变 
量 x 和 y。 也 可 以 在 声明 变量 时 给 变量 赋 上 初 值 。 例 如 var x 二 2,var name 一 " 张 三 "。 下 面 
的 程序 给 大 家 示例 了 变量 的 含义 及 使 用 。 

< Script language = "JavaScript" type = "text/JavaScript"> 

x prompt(" 请 输入 科 数 "); 

y= prompt(" 请 输入 被 乘 数 " ); 

cocunent. witelxt y+ "结果 为:"); 
document. write(z); 

</Script> 

该 程序 运行 中 定义 了 两 个 变量 x 和 y。 调 用 两 次 prompt 函数 接收 用 户 输入 的 数 赋值 
给 x 和 y。 然 后 将 x 乘 以 y 的 值 存储 在 变量 z 中 。 最 后 将 z 的 值 输出 到 浏览 器 中 。 

对 于 变量 还 有 一 个 重要 特性 一 一 那 就 是 变量 的 作用 域 。 在 JavaScript 中 同样 有 全 局 变 
量 和 局 部 变量 。 全 局 变量 是 定义 在 所 有 函数 体 之 外 ,其 作用 范围 是 整个 函数 ; 而 局 部 变量 
是 定义 在 函数 体 之 内 ,只 对 其 所 在 函数 是 可 见 的 ,而 对 其 他 函数 则 是 不 可 见 的 。 

3. 数组 

数组 是 若干 个 数据 的 集合 ,这 若干 个 数据 共享 一 个 变量 名 称 , 对 数组 元 素 的 访问 是 通过 
下 标 来 进行 的 。 

数组 的 定义 采用 基于 对 象 的 方法 。 通 常 是 通过 在 new 运算 符 后 加 数组 对 象 Array 的 
方式 定义 数组 。 例 如 代码 var a 二 new Array(10) 定 义 了 一 个 数组 ,该 数组 有 10 个 元 素 ,这 
10 个 元 素 在 编程 时 相当 于 10 个 普通 变量 ,它们 依次 是 aL0]、a[1]、…、a[L9]。 其 中 括号 中 的 
数字 叫做 数组 的 下 标 ,可 以 是 变量 或 表达 式 , 数 组 的 下 标 是 从 0 开始 的 。 

数组 元 素 的 个 数 可 以 通过 length 属性 进行 访问 。 对 数组 的 操作 往往 都 是 配合 循环 结 
构 进行 的 。 

定义 数组 时 也 可 以 不 指定 数组 元 素 个 数 ,如 var b= 二 new Array()。 这 时 定义 了 一 个 零 
个 元 素 的 数组 。 以 后 可 以 通过 下 标 来 对 数组 进行 扩容 。 例 如 定义 b 后 再 加 b[L100] 王 123， 
则 数组 b 的 length 属性 将 变 成 101( 注 意 数组 下 标 是 从 0 开始 的 ) 。 


知识 14 ， JavaScript 运算 符 和 表达 式 


1. 运算 符 

在 JavaScript 中 定义 了 一 系列 的 符号 来 表示 特定 的 运算 ,这 些 符号 就 称 为 运算 符 。 按 
类 型 来 分 ,JavaScript 中 的 常用 运算 符 分 为 赋值 运算 符 、 算 术 运 算 符 、 字 符 串 运算 符 、 关 系 运 
算 符 和 逻辑 运算 符 。 

(1) 赋值 运算 符 

JavaScript 中 的 “一 "运算 符 称 为 赋值 运算 符 , 它 的 作用 是 将 一 个 变量 .常量 或 表达 式 的 
值 赋 给 一 个 变量 。 例 如 a=1*2*3x*4x5 的 作用 是 将 *1 乘 2 乘 3 乘 4 乘 5”( 即 120) 的 值 
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赋 给 变量 a。 以 后 变量 a 参与 其 他 运算 时 其 值 就 为 120。 
(2) 算术 运算 符 
JavaScript 中 的 算术 运算 符 如 表 7-5 所 示 。 


表 7-5 算术 运算 符 
运算 符 含义 例 子 运算 结果 
- 负 值 一 2 一 2 
关 乘法 5x 4 20 
/ 除法 3/2 Ls 
% 取 余 5%2 1 
年 加 法 10 十 3 13 
减法 总 一 入 
十 十 自 加 a 一 2; a 十 十 a 一 6 
二 自 减 a 一 3 a 一 一 a 一 2 


这 些 运 算 符 中 ,一 ( 负 值 运算 符 )、 十 十 .一 一 运算 符 只 需要 一 个 数 参 与 运算 , 称 为 单 目 运 
算 符 。 其 余 的 均 需 要 两 个 操作 数 参 与 , 称 为 双 目 运算 符 。 
(3) 字符 串 运算 符 
JavaScript 中 的 运算 符 “ 十 ”也 可 以 作用 到 两 个 字符 串 上 ,其 运算 的 结果 为 两 个 字符 串 
的 连接 。 如 以 下 程序 所 示 : 
< Script language = "JavaScript" type = "text/JavaScript"> 
Var sl =". 
var s2 = "标题 
Var s3= 


var s= sl+s2+s3; 
document. write(s); 
</Script> 
(4) 关系 运算 符 
JavaScript 中 的 关系 运算 符 如 表 7-6 所 示 。 


表 7-6 关系 运算 符 
运算 符 含义 例 子 运算 结果 
一 一 等 于 6 一 一 2 False 
!= 不 等 于 6!=2 True 
< 小 于 6 一 2 False 
> 大 于 6>2 True 
去 一 小 于 等 于 6 一 一 2 False 
sd 大 于 等 于 6>=2 True 


可 见 关系 运算 就 是 在 比较 两 个 运算 量 的 大 小 关系 。 如 果 满 足 ,比较 的 结果 为 常量 
True, 如 果 不 满足 .比较 的 结果 为 常量 False。 

(5) 逻辑 运算 符 

JavaScript 中 共 提 供 了 三 种 逻 辑 运 算 符 , &.&.( 人 逻辑 与 ), ‖ (逻辑 或 ) ,逻辑 非 (!1) 。 参 与 
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逻辑 运算 的 量 通常 为 运算 结果 为 布尔 型 的 表达 式 (例如 关系 表达 式 或 逻辑 表达 式 ) 。 这 三 个 
逻辑 运算 符 运算 的 真 值 表 如 表 7-7 所 示 。 


表 7-7 逻辑 运算 真 值 表 


a b !a !p a&&hb a hb 
True True False False True True 
True False False True False True 
False True True False False True 
False False True True False False 


可 见 逻 辑 与 运算 当 且 仅 当 两 个 量 都 为 True 时 运算 结果 才 为 True, 其 余 全 部 为 False。 
逻辑 或 运算 当 且 仅 当 两 个 运算 量 都 为 False 时 结果 才 为 False, 其 余 全 部 为 True。 逻 辑 非 为 
单 目 运算 符 。 当 运算 量 为 True 时 非 运算 结果 为 False, 当 运算 量 为 False 时 非 运 算 结 果 为 
True。 

2. 表达 式 

JavaScript 中 由 运算 符 构 成 的 符合 JavaScript 语法 的 式 子 称 为 表达 式 。 如 a 十 b、 学 
号 "十 "姓名 " \a 十 b 之 一 a 一 cyear%4 0&.&.year% 100!=0 | year%400==0 等 都 是 合 
法 的 JavaScript 表达 式 。 

当 由 多 个 运算 符 构 成 一 个 表达 式 时 ,按照 运算 符 的 优先 级 , 先 计算 优先 级 高 的 ,后 计算 
优先 级 低 的 。 

JavaScript 中 常用 运算 符 的 优先 级 按 如 图 7-3 所 示 的 顺序 由 高 到 低 。 


>、 >=、 
<、<= 


Ee !、 一 ( 负 号 )F=| *、/、% | +、 一 | | 


图 7-3 运算 符 优先 级 


JavaScript 中 运算 符 的 结合 性 分 为 左 结 合 和 右 结 合 两 种 。 从 图 7-3 可 以 看 出 相同 优先 
级 的 运算 符 有 多 个 , 当 优先 级 相同 的 运算 符 在 一 起 运算 时 ,就 要 看 结合 性 。 如 果 结 合 性 为 左 
结合 ,按照 从 左 到 右 的 顺序 ,如 果 为 右 结合 , 按 照 从 右 向 左 的 顺序 进行 。 所 有 单 目 运算 符 
(十 十 ` 一 一 \ 上 一 等 ) 都 是 右 结 合 的 。 而 所 有 的 双 目 运算 符 中 除了 赋值 运算 符 (= ) 为 右 结合 
之 外 其 余 的 全 为 左 结合 。 


知识 15 ”JavaScript 程序 控制 结构 


无 论 多 么 复杂 的 多 辑 结构 ,最 终 都 可 以 简化 为 三 种 迎 辑 的 组 合 。 这 三 种 迎 辑 就 是 顺序 
逻辑 .选择 逻辑 和 循环 多 辑 。 所 以 在 面向 过 程 的 结构 化 程序 设计 语言 中 ,都 有 专门 的 程序 语 
法 来 构成 这 三 种 结构 。 

1. 顺序 结构 

顺序 结构 是 最 简单 的 程序 结构 ,就 是 按照 程序 书写 的 顺序 逐条 语句 地 执行 。 例 如 以 下 
代码 : 
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全 


< Script language = "JavaScript" type = "text/JavaScript"> 
var r= prompt(" 请 输入 圆 的 半径 "); 
Var area= 3.1415926 关 工 关 工 7 
document. write(" 半 径 为 "+zr+" 的 圆 的 面积 为 :" + area); 
</Script> 
该 代码 中 的 几 条 语句 就 构成 了 顺序 结构 ,也 就 是 程序 会 按照 书写 代码 时 的 顺序 逐步 
执行 。 
2. 选择 结构 
选择 程序 结构 用 于 判断 给 定 的 条 件 ,根据 判断 的 结果 判断 某 些 条 件 , 根 据 判断 的 结果 来 
控制 程序 的 流程 。 使 用 选择 结构 语句 时 ,要 用 条 件 表达 式 来 描述 条 件 。JavaScript 中 共有 4 
种 控制 语句 来 构成 选择 结构 。 分 别 为 if else 结构 ,if else if 结构 switch 结构 。 
if else 结构 的 语法 如 下 : 
证 (表达 式 ) 
语句 1 
else 
语句 2 
如 下 程序 会 根据 用 户 上 网 时 间 显 示 不 同 的 问候 语 。 


< Script language = "JavaScript" type = "text/JavaScript"> 
var d= new Date(); // 创 建 一 个 日 期 对 象 ,默认 为 当前 时 间 
var h= d. getHours( ); // 取 得 日 期 的 时 数 
if(h<= 12) 
document, write("<hl > 早上 好 </hl >"); 
else 
document. write("<hl > 下 午 好 </hl >"); 
</ Script> 


if else if 结构 的 语法 如 下 : 
让 (表达 式 1) 
语 旬 1; 
else if( 表 达 式 2) 
语句 2; 
else if( 表 达 式 n) 
语句 nn 
else 
语句 n 十 1; 
下 面 的 程序 采用 if else if 结构 改进 了 上 面 的 程序 ,使 得 页 面 问候 按 当 前 时 间 划 分 得 更 
细致 。 


< Script language = "JavaScript" type= "text/JavaScript"> 


var d= new Date(); // 创 建 一 个 日 期 对 象 ,默认 为 当前 时 间 
var h= d. getHours( ); // 取 得 日 期 的 时 数 
if(h<= 8) /10 到 8 点 


document. write("< hl > 清晨 好 </hl >"); 


else if(h<=12) 
document. write("< hl > 早上 好 </hl >"); 
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//8 到 12 点 


else if(h<=14) //12 到 14 点 
document. write("< hl > 中 午 好 </hl >"); 
else if(h<=20) //14 到 20 点 
document. write("< hl > 下 午 好 </hl >"); 
else //20 点 到 0 点 
document. write("< hl > 晚上 好 </hl >") 
</Script> 
switch 结构 的 语法 如 下 : 
switch( 表达 式 ) 
{ 


ease 表达 式 1: 语句 1; 
ease 表达 式 2: 语句 2; 


ease 表达 式 n: 语句 n; 
default: 语句 n 十 1; 


} 


switch 语句 的 执行 流程 是 : 首先 计算 switch 后 面 圆 括号 中 表达 式 的 值 , 然 后 用 此 值 依 
次 与 各 个 case 的 常量 表达 式 比 较 , 若 圆 括号 中 表达 式 的 值 与 某 个 case 后 面 的 常量 表达 式 的 
值 相等 ,就 执行 此 case 后 面 的 语句 ,执行 后 遇 break 语句 就 退出 switch 语句 ; 若 圆 括 号 中 
表达 式 的 值 与 所 有 case 后 面 的 常量 表达 式 都 不 等 , 则 执行 default 后 面 的 语句 n 十 1, 然 后 退 
出 switch 语句 ,程序 流程 转向 switch 语句 的 下 一 个 语句 。 


如 下 代码 能 根据 用 户 的 输入 选择 网 页 的 背景 颜色 : 


< Script language = "JavaScript" type = "text/JavaScript"> 
var color = prompt(" 请 选择 页 面 背景 颜色 代码 ( 红 绿 蓝 灰 黑 )"); 


Switch(color) 


{ 
case " 红 " 
case " 绿 " 
case " 蓝 " 
case " 灰 " 
case " 黑 "” 


:document. body. style 
:document. body. style 
:document. body. style. 
:document. body. style. 
:document. body. style 


. backgroundColor = " #ff£0000"; break; 
. backgroundColor = " #00ff£00"; break; 
. backgroundColor = " #0000ff"; break; 
. backgroundColor = " #555555"; break; 
. backgroundColor = " #000000"; break; 


default: document. body. style. backgroundColor = " HfffffE"; 


} 
</Script > 


代码 中 的 document. body. style. backgroundColor 使 用 文档 对 象 模型 (DOM) 的 方法 取 
得 二 body 二 标签 的 style 属性 的 backgroundColor 项 。 

注意 : 这 段 代码 应 该 放置 到 二 body 二 一 /body 二 标签 中 或 二 body 二 标签 之 后 。 因 为 
JavaScript 代码 是 解释 型 脚本 代码 ,必须 等 body 二 部 分 载 入 后 才能 访问 它 。 


3. 循环 结构 


循环 结构 用 于 在 给 定 的 条 件 成 立 的 时 候 , 执 行 若干 语句 ( 称 为 循环 体 语句 ) 。JavaScript 
中 的 循环 结构 语句 有 三 种 ,分 别 为 while 语句 、do while 语句 ,for 语句 。 
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while 语句 的 语法 为 : 


while( 表 达 式 ) 
循环 体 语句 


如 下 程序 使 用 while 循环 向 页 面 输出 一 个 10 行 两 列 的 表格 。 


< Script language = "JavaScript" type = "text/JavaScript"> 
var t= "< table border = '1'cellpadding = '0' cellspacing = '0>"; 
var i=0; 
while(i<10) 
{ 
t=t+"<tr><td width= '100' >" + i + "</td>"; 
t=t+"<td width= '100'>" + (i+1) + "</td>" + "</tr>"; 
tt 
} 
t=t+"</table>"; 
document. write(t); 


</Script> 
do while 语句 的 语法 为 : 
do 

循环 体 语句 
while( 表 达 式 ) 


如 下 程序 用 do while 循环 来 实现 对 表格 中 的 相 邻 行 设置 不 同 的 背景 色 。 


< Script language = "JavaScript"> 
var tb = document. getElementById( "score"); 
Var rs = tb. rows; 
var i=1; 
do 
{ 
if(i%2==0) 
rs[i]. style.backgroundColor = " #69F"; 
} 
else 
{ 
rs[i]. style. backgroundColor = " #F96"; 
} 
itt; 
}while(i<rs. length); 
</Script > 


程序 中 的 第 一 行 document. getElementById("score") 通 过 文档 对 象 模 型 取得 待 设置 的 
表格 对 象 。 第 二 行 tb. rows 属性 为 表格 对 象 的 所 有 行 构成 的 数组 。 

注意 : 该 程序 必须 放置 到 HTML 代码 中 表格 元 素 的 后 面 ,因为 页 面 必 须 先 加 载 表格 对 
象 后 才能 取得 该 对 象 对 其 进行 设置 。 而 且 应 该 给 表格 标签 二 table 二 设置 ID 属性 为 
“score”, 即 一 table ID="score">。 

for 结构 的 语法 如 下 : 
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& 


for( 表 达 式 1; 表 达 式 2; 表 达 式 3) 
循环 体 语句 ; 


知识 16 _ JavaScript 语句 与 用 数 


语句 和 函数 是 构成 JavaScript 程序 的 最 基本 的 元 素 。JavaScript 中 的 语句 可 以 不 放置 
在 任何 函数 中 ,前 面 的 举例 中 都 采用 的 是 这 样 的 形式 。 不 放置 在 任何 函数 中 的 语句 当 页 面 
加 载 的 过 程 中 就 会 自动 执行 。 也 可 以 定义 一 个 函数 ,将 一 些 语句 放置 在 函数 中 。 这 样 程序 
加 载 的 过 程 中 并 不 会 去 执行 函数 中 的 代码 ,而 是 当 将 来 需要 执行 这 些 代码 的 时 候 再 调用 这 
个 函数 。 

1. 语句 

前 面 讨论 了 表达 式 的 概念 后 我 们 知道 ,表达 式 的 作用 是 生成 并 返回 一 个 值 。JavaScript 
中 除了 可 以 由 表达 式 构成 语句 之 外 还 有 许多 其 他 的 语句 。 通 过 这 些 语句 可 以 控制 程序 代码 
的 执行 次 序 。 从 而 完成 比较 复杂 的 程序 操作 。 

JavaScript 中 的 语句 主要 分 为 以 下 几 种 类 型 的 语句 。 

(1) 变量 定义 语句 。 变 量 定义 语句 通过 var 关键 字 定 义 一 个 或 多 个 变量 ,以 便 在 后 面 
的 程序 处 理 中 存储 和 读 取 数 据 。 

(2) 表达 式 语 句 。 由 前 面 介 绍 过 的 表达 式 构成 的 语句 。 

(3) 复合 句 。 将 多 条 语句 使 用 一 对 大 括号 (1{)) 括 起 来 构成 一 条 复合 语句 。 在 前 面 介 绍 
的 选择 结构 和 循环 结构 中 如 果 if else、while、do while 和 for 语句 中 要 包含 的 语句 只 要 多 于 
一 条 时 都 要 将 它们 用 大 括号 括 起 来 构成 一 条 复合 语句 。 

(4) 控制 语句 。JavaScript 中 的 控制 语句 主要 用 来 控制 程序 的 流程 ,包括 让 语句 .if else 
语句 .switch 语句 、while 语句 .do while 语句 for 语句 .break 语句 、continue 语句 等 。 

(5) 函数 定义 语句 。 通 过 function 关键 字 可 以 定义 一 个 函数 ,以 便 将 来 需要 的 时 候 执 
行 函数 中 的 语句 代码 。 

(6) return 语句。 用 在 函数 定义 语句 中 ,表示 函数 调用 结束 ,并 且 返 回 一 个 值 。 

(7) 异常 处 理 语句 。 蜡 常 处 理 语句 用 来 处 理 在 JavaScript 中 抛 出 、 接 收 、 处 理 异 常 。 包 
插 throw 语句 ,try catch 语句 等 。 

2. 函数 

函数 为 程序 设计 人 员 提 供 了 一 个 非常 方便 的 能 力 。 通 常 在 进行 一 个 复杂 的 程序 设计 
时 ,总 是 根据 所 要 完成 的 功能 ,将 程序 划分 为 一 些 相对 独立 的 部 分 ,每 部 分 编写 一 个 函数 。 
从 而 ,使 各 部 分 充分 独立 ,任务 单一 ,程序 清晰 , 易 懂 、 易 读 、 易 维护 。JavaScript 函数 可 以 封 
装 那些 在 程序 中 可 能 要 多 次 用 到 的 模块 ,并 可 作为 事件 驱动 的 结果 而 调用 的 程序 。 

JavaScript 中 函数 定义 的 语法 如 下 : 

function ”函数 名 ( 形 参 列表 ) 

{ 

函数 体 语句 ; 

} 

其 中 函数 的 形 参 表示 将 来 在 调用 函数 的 时 候 传递 给 函数 的 数据 ,函数 体 语句 对 这 些 传 
人 的 参数 进行 加 工 处 理 。 函 数 也 可 以 没有 形 参 列表 。 
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如 下 代码 中 定义 了 一 个 带 形 参 列表 的 函数 ,其 功能 是 根据 输入 的 年 份 数 来 判断 其 是 不 
是 闵 年 。 


< html > 
< head > 
< Script language = "JavaScript"> 
function isLeapYear( year) 
{ 
if(year% 4==0&&year%100! =0 | year% 400 == 0) 
return true; 
else 
return false; 
} 
</ Script> 
</head> 
< body> 
< Script language = "JavaScript"> 
var y= prompt( "请 输入 一 个 年 份 数 "); 
var iy= parseInt(y); 
if(isLeapYear( iy)) 
document. write(y+ "年 是 羡 年 </br >"); 
else 
document. write(y+ "年 不 是 疼 年 </br >"); 
</Script > 
</body> 
</html > 
上 面 的 程序 中 定义 了 一 个 函数 isLeapYear, 该 函数 带 有 一 个 形 参 。 二 body 二 标签 中 的 
另 一 段 JavaSeript 代码 通过 语句 调用 了 这 个 函数 。 调 用 时 将 变量 iy 的 值 传递 给 了 函数 的 
形 参 year。 函 数 中 对 year 的 值 进行 了 判断 (也 就 是 变量 iy 的 值 ), 如 果 是 阔 年 则 函数 通过 
reaturn true 返回 true, 和 否则 返回 false。 代 码 if(isLeapYear(iy)) 对 函数 isLeapYear 进行 了 
调用 。 调 用 后 将 得 到 函数 的 返回 值 给 if 语句 进行 判断 。 


知识 17 ”JavaScript 核心 内 置 对 象 


JavaScript 是 一 个 基于 对 象 的 脚本 程序 语言 ,支持 面向 对 象 编程 的 大 部 分 功能 。 对 象 
是 属性 的 集合 体 。 一 个 对 象 可 以 包含 若干 属性 和 方法 。 属 性 描述 了 对 象 的 特征 ,方法 是 与 
对 象 有 关 的 某 种 操作 。 

JavaScript 内 置 了 若干 对 象 用 来 完成 一 些 常 见 的 功能 ,这 些 对 象 称 为 JavaScript 核心 对 
象 。 这 些 核 心 对 象 有 String,Math. Array. Boolean, Date, Function, Number, Object。 下 面 
介绍 其 中 常用 的 几 个 ,其 他 的 可 以 参照 相关 书籍 。 

1. String 对 象 

String 是 专门 用 来 处 理 文本 的 对 象 , 它 是 一 个 动态 对 象 。 使 用 时 必须 创建 其 实例 才能 
调用 String 对 象 的 属性 和 方法 。JavaScript 中 的 变量 如 果 存 储 的 是 字符 串 , 则 变量 自动 被 
转化 为 一 个 String 对 象 的 实例 。 所 以 在 使 用 String 对 象 时 既 可 以 通过 new 运算 符 来 创建 ， 
也 可 以 通过 创建 字符 串 变量 来 创建 。 例 如 var s 王 new String("abcd"); 和 var s 二 "abcd" 的 
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作用 都 是 创建 了 一 个 String 对 象 的 实例 s。 

2. Math 对 象 

Math 对 象 拥有 可 以 表示 复杂 数学 运算 的 属性 和 方法 。Math 对 象 是 静态 对 象 ,所 以 在 
使 用 的 时 候 直 接 由 Math 对 象 来 调用 属性 和 方法 ,而 不 用 使 用 new 运算 符 来 创建 Math 对 
象 的 实例 。 例 如 Math. PI 将 得 到 圆周 率 的 值 , Math. sin(Math. PI/2) 将 调用 sin 函数 来 求 
PI/2 的 正弦 。 

下 面 的 程序 借助 Math 类 来 实现 一 个 产生 10 位 随机 数字 的 抽奖 程序 。 


< Script language = "JavaScript"> 
Var randomstr = "" 
for(var i=0;i<10;i++) 
{ 
var r= Math. random( ) * 10; 
var ir = Math. floor(r); 
randomstr += ir; 
} 
document. write( randomstr); 
</Script> 


3. Date 对 象 

JavaScript 中 的 Date 对 象 用 于 处 理 日 期 和 时 间 , 它 是 一 个 动态 对 象 ,使 用 时 必须 用 new 
运算 符 来 创建 其 实例 。 构 造 一 个 Date 对 象 的 方法 是 使 用 new 运算 符 , 如 var d 二 new Date()， 
则 d 即 为 一 个 Date 对 象 的 实例 , 它 所 存储 的 日 期 为 运行 该 程序 的 机 器 的 当前 时 间 。 还 可 以 
在 构造 Date 实例 的 时 候 给 构造 函数 Date 传人 参数 ,如 var d 二 new Date(1982,11,8,10， 
20,40,20) ,代表 d 所 对 应 的 日 期 为 1982 年 11 月 8 日 10 时 20 分 40 秒 20 毫秒 。 

如 下 程序 能 够 在 页 面 中 动态 地 显示 当前 的 系统 时 间 。 

<div id= "time"> 

</div> 


< Script language = "JavaScript"> 
var divTime = document. getElementById("time");// 获 得 id 为 "time" 的 div 标签 对 象 


Var strTime= ""; // 存 储 当前 时 间 , 初始化 为 空 字符 串 
function fun() // 定 义 函 数 获取 当前 系统 时 间 
{ 
var d= new Date( ); // 构 造 一 个 代表 当前 时 间 的 对 象 
var year = d. getYear( ); // 获 取 年 


Var month = d. getMonth( ) +1; 

var day= d.getDate( ) 

var hours = d. getHours( ); 

var minutes = d. getMinutes(); 

Var seconds = d.getSeconds(); 

// 将 年 月 日. 时、 分 . 秒 组 合成 中 文 表 示 的 字符 串 

strTime= year+ "年 " +month+ "月 "+ day+ "日 "+ hours+ "时 "+minutes+ "分 "+ seconds+ " 秒 "; 
// 设 置 id 为 time 的 div 标签 中 的 内 容 为 strTime 变量 的 内 容 

divTime. innerHTML = "< hl >" + strTime + "</hl >"; 
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这 


window. setInterval("fun()",1000);// 每 隔 1000 毫秒 调用 一 次 fun() 函 数 更 新 时 间 

</script> 

该 程序 中 用 到 了 函数 调用 setInterval() ,该 函数 为 文档 对 象 window 对 象 的 方法 函数 。 
其 作用 是 每 隔 一 定时 间 调 用 一 段 JavaScript 代码 。 


模拟 制作 任务 
任务 1 超 链 接 的 4 种 状态 的 样式 设计 
任务 青 景 


通常 在 设计 网 页 超 链 接 时 需要 有 样式 变化 ,这 样 可 以 起 到 提示 浏览 者 的 作用 。 通 过 设 
置 超 链接 的 4 种 链接 状态 (a:link,a:visited,a:hover 和 a:active) 可 以 实现 链接 样式 的 变化 。 


任务 要 求 
超 链接 的 4 种 链接 状态 应 该 要 有 一 定 的 变化 ,并 且 每 种 状态 的 文字 颜色 应 该 与 背景 颜 
色 有 一 定 的 反差 。 


【技术 要 领 】4 种 链接 状态 的 样式 设计 。 

【解决 问题 】 链 接 样式 设计 。 

【应 用 领域 】 链 接 显示 。 

任务 分 析 

本 任务 较为 烦琐 ,需要 设置 链接 的 4 种 样式 的 CSS 规则 ,同时 还 应 该 让 各 种 样式 之 间 
有 一 定 的 区 别 。 


重点 和 难点 
a:link,a:visited,a:hover 和 a:active 的 样式 设计 。 
操作 步骤 


(1) 编写 如 下 代码 设置 网 页 超 链接 的 4 种 状态 的 样式 吕 。 


< style type = "text/css"> 


Fe 
a:link { 

font - family: "宋体 "; 

font — size: 16px; 

color: #0000FF; 

text — decoration: none; 
} 
a:visited { 

font - family: "宋体 "; 

font — size: 16px; 

color: #FFO0000; 

text — decoration: line - through; 
} 
a:hover { 


font - family: "宋体 "; 
font — size: 24px; 
color: #00FF00; 


text — decoration: underline; 
} 
a:active { 
font — size: 24px; 
Color: FFFFFO0O0; 
text — decoration: none; 
font - family: "宋体 "; 
} 
-—> 
</style> 


注意 : 在 定义 链接 样式 时 ,一 定 要 按照 a:link,a:visited,a:hover 和 a:active 的 顺序 书 


写 ,否则 有 些 状 态 的 样式 不 能 正常 显示 。 


(2) 也 可 以 通过 选择 器 的 嵌 套 实现 样式 的 分 块 控制 ,如 下 面 的 样式 代码 为 网 页 中 的 两 


个 层 分 别 定义 了 样式 的 4 种 状态 。 


< html > 
< head > 


& 
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<meta http - equiv = "Content — Type" content = "text/html; charset = gb2312" /> 


<title > 超 链 接 样式 的 分 块 控制 </title> 
<style type = "text/css"> 
Ee 
#Layerl a:link { 
font - family: "宋体 "; 
font — size: 16px; 
color: #0000FF; 
text — decoration: none; 
} 
#Layerl a:visited { 
font - family: "宋体 "; 
font 一 size: 16px; 
color: #FF0000; 
text - decoration: line - through; 
} 
#Layerl a:hover { 
font - family: "宋体 "; 
font 一 Size: 24px; 
color: #000000; 
text — decoration: underline; 
} 
#Layerl a:active { 
font — size: 24px; 
Color: #FFFFO0O0; 
text — decoration: none; 
font - family: "宋体 "; 
} 
#Layer2 a:link { 
font - family: "宋体 "; 
font — size: 16px; 
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} 


color: #FFFFOO; 
text - decoration: none; 


#Layer2 a:visited { 


} 


font - family: "宋体 "; 

font — size: 16px; 

color: #FF0000; 

text — decoration: line— through; 


#Layer2 a:hover { 


} 


font - family: "宋体 "; 
font — size: 24px; 
color: #00FF00; 


text — decoration: underline; 


#Layer2 a:active { 


} 


font — size: 24px; 
color: #FFFFO0O0; 

text — decoration: none; 
font - family: "宋体 "; 


#Layerl { 


Z- index:1; 
background - color: #00FF00; 
} 
HLayer2 { 
position:absolute; 
left :289px; 
top:60px; 
width:186px; 
height :204px; 
z— index:2; 
background — color: #0000FF; 
} 
= 一 所 
</style> 
</head> 
<body> 
<div id= "Layerl"><a href = "http://www.w3cschool 
<div id= 
</body > 


position:absolute; 
left :68px; 
top:59px; 
width:197px; 
height :203px; 


</html > 


这 


.cn/"> 链 接 的 4 种 状态 </a></div> 


Layer2"><a href = "http://www. w3cschool. cn/"> 链 接 的 4 种 状态 </a></div> 
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任务 2 网 页 换 肤 效果 的 实现 

任务 背景 

有 了 时 网 页 为 了 满足 用 户 更 换 网 页 风格 的 需要 ,可 以 为 用 户 提 供 网 页 换 肤 功能 。 换 肤 功 
能 的 实现 相对 简单 ,通常 的 做 法 是 提供 多 个 外 部 样式 表 文件 ,用 户 选 择 不 同 的 网 页 样式 时 通 
过 程序 修改 网 页 依赖 的 样式 文件 ,从 而 达到 为 网 页 换 肤 的 效果 。 

任务 要 求 

(1) 需要 制作 多 个 外 部 样式 表 文 件 。 

(2) 提供 功能 按钮 让 用 户 选择 不 同 的 网 页 样式 ,实现 换 肤 效 果 。 

【技术 要 领 】 如 何 使 用 脚本 语言 实现 网 页 样式 文件 的 切换 。 

【解决 问题 】 网 页 外 部 样式 表 文件 更 改 。 

【应 用 领域 】 网 页 换 肤 。 

任务 分 析 

本 任务 较为 简单 ,只 需 制 作 多 个 外 部 样式 表 文件 ,然后 使 用 脚本 语言 实现 网 页 样式 文件 
的 切换 ,最 终 达到 网 页 换 肤 的 效果 。 

重点 和 难点 

网 页 外 部 样式 表 文 件 更 改 。 

操作 步骤 

换 肤 效果 的 实现 其 实 比较 简单 ,其 原理 是 准备 几 套 网 页 样式 ,然后 根据 用 户 的 选择 加 载 
相应 的 样式 文件 来 实现 换 肤 效果 。 下 面 通过 一 个 简单 任务 详细 讲述 网 页 换 肤 效果 的 实现 。 

(1) 制作 样式 文件 acss, 输 入 如 下 样式 代码 。 


body { 
margin:07 
padding:0; 
background:url(bgl. jpg); 
} 
#wrap { 
height :600px; 
background:url(dwl. jpg) no - repeat center top; 
margin ~ top:20px; 


(2) 同样 制作 样式 文件 b. css, 输 入 如 下 样式 代码 。 


body { 
margin:0; 
padding:0; 
background:url(bg2. jpg); 
} 
#wrap { 
height :600px; 
background:url (dw2. jpg) no - repeat center top; 
margin— top:20px; 
' 
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(3) 制作 一 个 静态 网 页 ,代码 如 下 。 


<html> 

<head> 

<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 样 式 切换 </title> 

<link id = "mycss" rel = "stylesheet" type = "text/css" href = "a.css"> 

</head> 

<body> 

< input type = button value = "风格 一 " onclick = "document.all. mycss. href = 'a. css'"> 
< input type = button value = "风格 二 " onclick = "document.all.mycss. href = 'b. css'"> 
<div id= "wrap"> 


</div> 
</body> 
</html > 
(4) 在 浏览 器 中 预览 的 效果 如 图 7-4 和 图 7-5 所 示 。 


马 祥 式 切换 - Windors Internet Expl 本 忆 样式 切换 - Yindors = 
文件 @) 编辑) 查看 0) 收藏 和) 了 月 ” 文件 四 ”编辑 时) 查看 四 收藏 4) 工 肯 ” 怖 
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图 7-4 样式 效果 一 图 7-5 样式 效果 二 


从 图 7-4 和 图 7-5 可 以 看 出 , 当 单 击 “ 风 格 二 ”按钮 时 ,网 页 的 显示 风格 发 生 了 明显 的 变 
化 。 样 式 变化 的 原因 是 网 页 加 载 了 另 一 个 样式 文件 。 从 第 三 步 的 网 页 代码 中 可 以 看 出 ,网 
页 通过 link 标签 加 载 外 部 CSS 文件 ,代码 如 下 所 示 。 


<link id = "mycss" rel = "stylesheet" type = "text/css" href = "a.css"> 
当 用 户 单 击 不 同 的 按钮 时 可 以 通过 代码 document. all. mycss. href 二 "cssName. css" 来 
加 载 不 同 的 外 部 CSS 文件 ,从 而 实现 样式 的 切换 。 


知识 点 拓展 


在 给 文字 或 图 像 设 置 链接 后 ,它们 就 会 自动 包含 4 种 链接 状态 ,分 别 是 a: link,a: 
visited,a:hover 和 a:active, 每 种 状态 代表 的 含义 如 下 。 
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a:link: 链接 的 默认 状态 , 即 没有 触发 任何 鼠标 事件 时 所 呈现 的 状态 。 

a:visited: 访问 过 的 链接 状态 , 即 当 该 链接 被 单 击 后 所 呈现 的 状态 。 

a:hover: 鼠标 经 过 时 的 链接 状态 , 即 当 鼠 标 放 置 在 有 链接 的 对 象 上 时 所 呈现 的 状态 。 
aiactive: 鼠标 单 击 时 的 链接 状态 , 即 单 击 链接 但 未 释放 鼠标 时 所 呈现 的 状态 。 


实 训 制作 折 又 菜单 


实 训 目的 
通过 制作 一 个 简单 的 基于 JavaScript 的 折 笃 菜单 ,让 学 生理 解 脚本 语言 的 应 用 ,掌握 基 
本 脚本 语言 的 使 用 。 


实 训 内 容 


(1) 设计 折 私 菜单 界面 元 素 。 
(2) 对 折 麦 菜单 设置 相关 属性 。 
(3) 编写 折 秋 菜单 事件 代码 。 


实 训 过 程 
(1) 新 建 一 个 网 页 ,网 页 完整 代码 如 下 。 


< html > 

<head > 

< meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 折 秋菜 单 </title> 

< Script language = "JavaScript1.1" type = "text/JavaScript"> 

考生 

NS4 = (document. layers) ?1 : 0; 


IE4 = (document.all) ?1 :0; 
ver4 = (NS4 || IE4) ?1 : 0; 
function SwichCtrl(el) { 
if (!ver4) return; 
if (IE4) { 
whichEl1 = eval(el); 
if (whichEl1. style. display == "none") { 
whichE11. style. display = "block"; 
document. getElementById(el + "Title"). src = "ico up. gif"; 
document. getElementById(el + "Title").title= "关闭 "; 
} 
else { 
whichEl1. style. display = "none"; 
document. getElementById(el + "Title"). src = "ico down. gif"; 
document. getElementById(el + "Title").title= "展开 "; 
} 
} 
else { 
WhichE1l = eval("document." + el); 
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if (whichEl. visibility == "hide") { 
whichEl. visibility = "show"; 

} 

else { 
whichE]l. visibility = "hide"; 


} 
==» 
</Script> 
</head> 
<body> 
< table width = "120" border = 
<tr> 
<td> 用 户 管理 < img src = "ico_down. gif" width = "16" height = "16" style = "cursor:hand" 
‘onClick = "SwichCtrl( 'mk1')" id= "mkltitle" title= "展开 " /></td> 
</tr> 
<tr id= "mkl" style= "display:nonei"> 
< td height = "100">< table width = " 100”height = "77" border = 
cellspacing = "0"> 
tr> 
<td><a href ="# "> 浏览 用 户 </a></td> 
</tr> 
tr> 
<td><a href ="#"> 添 加 用 户 </a></td> 
</tr> 
<tr> 
<td><a href ="#"> 删 除 用 户 </a></td> 
</tr> 
</table></td> 
</tr> 
<tr> 
<td> 商 品 管理 < img src = "ico_down. gif" width = "16" height = "16" style= "cursor:hand" 
‘onClick = "SwichCtrl( 'mk2')" id = "mk2title" title= "展开 "/></td> 
</tr> 
<tr id= "mk2" style= "display:none;"> 
<td>< table width = "100" height = "77" border = "0" cellpadding = "0" cellspacing = "0"> 
<tr> 
<td><a href ="# "> 浏览 商品 </a></td> 
</tr> 
<tr> 
<td><a href ="# "> 添加 商品 </a></td> 
</tr> 
<tr> 
<td><a href ="#"> 删 除 商 品 </a></td> 
</tr> 
</table></td> 
</tr> 
<tr> 
< td> 实 用 工具 < img src = "ico_down. gif" width = "16" height = "16" style = "cursor:hand" 
‘onClick = "SwichCtrl( 'mk3')" id= "mk3title" title= "展开 "/></td> 


1" cellpadding = "0" cellspacing = "0" bordercolor = " #333333"> 


cellpadding = "0" 
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</tr> 
<tr id= "mk3" style= "display:none;"> 
<td>< table width= "100" height = "77" border = "0" cellpadding = "0" cellspacing= "0"> 
<tr> 
<td><a href ="#"> 备 份 数据 库 </a></td> 
</tr> 
<tr> 
<td><a href ="# "> 恢复 数据 库 </a></td> 
</tr> 
<tr> 
<td><a href ="#"> 压 缩 数 据 库 </a></td> 
</tr> 
</table ></td> 
</tr> 
</table> 
</body> 
</html > 


(2) 在 浏览 器 中 预览 效果 如 图 7-6 所 示 。 


忆 折 和 菜单 - Windovs Internet Explorer 


Ga 日 国 国 的 Pa 下 wmx 加 | 全- 电 


地 址 四 | 蜀 http://localhostywebsite_app/chapter0T/shixuyzhedislenu htnl | 国共 到 


图 7-6 折 释 菜单 运行 效果 


从 网 页 代码 可 以 看 出 ,网 页 体 中 放置 了 一 个 6 行 1 列 的 表格 。 本 例 通过 JavaScript 代码 实 
现 奇数 行 对 偶数 行 显示 控制 来 制作 折 生 菜单。 如 下 面 为 表格 的 一 个 奇数 行 和 一 个 偶数 行 。 


<tr> 
<td> 用 户 管理 < img src = "ico_down. gif" width = "16" height = "16" style = "cursor: hand" 
‘onClick = "SwichCtr1( 'mk1')" id= "mkltitle" title= "展开 " /> 
</td> 
</tr> 
<tr id= "mk1" style= "display:none;"> 
<td height = "100"> 
<table width= "100" height = "77" border = "0" cellpadding = "0" cellspacing = "0"> 
一 嵌入 表格 内 容 省 略 
</table> 
</td></tr> 
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这 里 设置 表格 第 二 行 的 id 为 “mk1”( 意 为 模块 1) ,style 属性 中 的 display 项 值 为 none， 
即 默 认 隐 藏 这 一 行 不 让 其 显示 。 在 第 一 行 中 设置 img 标签 的 id 属性 为 "mkltitle”, 并 在 其 
onClick 事件 中 添加 函数 SwichCtrl('mk1') 。 函 数 传 人 的 参数 为 第 二 行 的 id 值 *^mk1”, 然 后 
在 JavaScript 代码 中 通过 改变 style 属性 中 的 display 项 值 为 block 来 显示 该 行 ,并 同时 改变 
img 标签 所 显示 的 图 片 。 其 他 4 行 的 控制 方式 和 第 一 ,二 行 类 似 ,只 需 给 每 行 对 应 标签 设置 
不 同 的 id 值 即 可 。 


实 训 总 结 


通过 本 章 的 JavaScript 折 革 菜单 设计 ,学 生 应 该 能 够 掌握 常用 脚本 语句 的 使 用 ,可 以 使 
用 脚本 语言 实现 一 些 基本 的 程序 功能 模块 。 


综合 任务 


1. 用 多 个 层 布局 一 个 网 页 ,给 各 层 设 置 不 同 的 背景 颜色 ,分 别 在 各 层 制作 测试 超 链接 
并 设置 各 层 中 超 链接 的 4 种 样式 。 

2. 给 第 1 题 网 页 设置 三 套 不 同 的 样式 ,并 在 网 页 上 制作 相应 的 按钮 或 链接 , 单 击 不 同 
的 按钮 或 链接 时 显示 不 同 的 网 页 样式 。 

3. 结合 JavaScript 和 CSS 制作 一 个 折 释 菜单 。 


ASP 动 态 扩展 


ASP 本 身 并 不 是 一 种 脚本 ,但 它 为 检 入 HTML 页 面 中 的 脚本 语言 (VBScript 和 
JavaScript) 提 供 了 运行 的 环境 。ASP 就 是 通过 脚本 语言 及 ASP 内 建 对 象 来 实现 各 种 网 站 
动态 功能 的 。 本 模块 主要 讲解 ASP 技术 的 特点 及 其 工作 原理 ,ASP 的 基本 语法 和 ASP 内 
建 对 象 的 使 用 方法 。 

能 力 目标 

1. 能 使 用 Request 获得 表单 数据 

2. 能 使 用 Request 获得 URL 参数 

3. 能 使 用 Request 获得 用 户 IP 地 址 

知识 目标 
.Request 对 象 
。 Response 对 象 
，Session 对 象 
，Cookie 对象 
.Application 对 象 


an mo 性 


知识 储备 


知识 1 _ ASP 的 特点 和 功能 


从 软件 的 技术 层面 看 ,ASP 有 如 下 的 特点 。 

(1) 无 须 编译 。ASP 脚本 集成 于 HTML 当中 ,容易 生成 ,无 须 编译 或 链接 即 可 直接 解 
释 执 行 。 

(2) 易于 生成 。 使 用 常规 文本 编辑 器 (如 Windows 下 的 记事 本 ) , 即 可 进行 * .asp 页 面 
的 设计 。 若 从 工作 效率 来 考虑 ,不 妨 选 用 具有 可 视 化 编辑 能 力 的 Visual InterDev、 
Dreamweaver 等 。 

(3) 独立 于 浏览 器 。 用 户 端 只 要 使 用 可 解释 常规 HTML 代码 的 浏览 器 , 即 可 浏览 ASP 
所 设计 的 主页 。ASP 脚本 是 在 站 点 服务 器 端 执行 的 ,用 户 端的 浏览 器 不 需要 支持 它 。 
此 , 若 不 通过 从 服务 器 下 载 来 观察 * . asp 主页 ,在 浏览 器 端 看 不 到 正确 的 页 面 内 容 。 

(4) 面向 对 象 。 在 ASP 脚本 中 可 以 方便 地 引用 系统 组 件 和 ASP 的 内 署 组 件 ,还 能 通 
过 定制 ActiveX Server Component(ActiveX 服务 器 组 件 ) 来 扩充 功能 。 
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(5) 与 任何 ActiveX Scripting 语言 兼容 。 除 了 可 使 用 VBScript 和 JScript 语言 进行 设 
计 外 ,还 可 通过 Plug-in 的 方式 ,使 用 由 第 三 方 所 提供 的 其 他 Scripting 语言 。 

(6) 源 程序 不 会 外 漏 。ASP 脚本 在 服务 器 上 执行 , 传 到 用 户 浏览 器 的 只 是 ASP 执行 结 
果 所 生成 的 常规 HTML 代码 ,这 样 可 保证 辛 辛 苦 苦 编写 出 来 的 程序 代码 不 会 被 他 人 盗 取 。 

从 应 用 的 层面 看 ,ASP 有 如 下 的 功能 。 

(1) 处 理由 浏览 器 传送 到 站 点 服务 器 的 表单 输入 。 

(2) 访问 和 编辑 服务 器 端的 数据 库 表 。 使 用 浏览 器 即 可 输入 、 更 新 和 删除 站 点 服务 器 
数据 库 中 的 数据 。 

(3) 读 写 站 点 服务 器 的 文件 ,实现 访客 计数 器 、 座 右 铭 等 功能 。 

(4) 提供 广告 轮 播 器 、 取 得 浏览 器 信息 .URL 表 管 理 等 内 置 功能 。 

(5) 由 Cookies 读 写 用 户 端 的 硬盘 文件 ,以 记录 用 户 的 数据 。 

(6) 可 以 实现 在 多 个 主页 间 共 享 信息 ,以 开发 复杂 的 商务 站 点 应 用 程序 。 

(7) 使 用 VBScript 或 JScript 等 简易 的 脚本 语言 ,结合 HTML 代码 ,快速 完成 站 点 的 
应 用 程序 。 通 过 站 点 服务 器 执行 脚本 语言 ,产生 或 更 改 在 客户 端 执行 的 脚本 语言 。 

(8) 扩充 能 力 强 ,可 通过 使 用 Visual Basic、Java、Visual C++ 等 多 种 程序 语言 制作 
ActiveX Server Component 以 满足 自己 的 特殊 需要 。 


知识 2 ASP 的 运行 环境 


ASP 网 页 需要 相应 的 Web 服务 器 的 支持 ,才能 正常 运行 ,其 Web 服务 器 主要 是 PWSC] 
和 IIS。 在 最 终 运行 ASP 页 面 时 ,一 般 选择 IIS 6. 0 作为 ASP 的 Web 服务 器 ,以 实现 对 
ASP 页 面 的 解析 。 操 作 系 统 应 选择 Windows 2003 Server 或 Advanced Server。 建 议 运 行 
环境 为 : Windows 2003 Server/Advanced Server 十 IIS 6.0。 

简单 地 说 ,ASP 文件 就 是 在 标准 的 HTML 文件 中 髋 入 JavaScript 或 VBScript 脚本 语 
言 。 在 前 面 章 节 中 已 经 使 用 过 脚本 语言 ,只 是 以 前 的 脚本 语言 在 客户 端 运行 ,客户 端 浏览 器 
必须 支持 它 才 行 ; 而 ASP 所 使 用 的 脚本 语言 是 在 服务 器 端 运行 的 ,这 是 它 的 主要 特点 。 

服务 器 先 把 ASP 文件 编译 成 标准 HTML 文件 ,然后 再 传送 到 客户 端 ,因此 不 管 客户 端 
的 浏览 器 是 否 支持 JavaScript 和 VBScript 脚本 语言 ,由 ASP 开发 出 来 的 网 页 均 可 以 正常 
显示 。 


知识 3 ASP 文件 的 基本 组 成 
如 下 为 一 个 简单 的 ASP 程序 代码 。 


<% (@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %> 

<html> 

<head> 

<meta http - equiv= "Content ~ Type" content = "text/html; charset = gb2312" /> 
<title> 一 个 简单 的 ASP 程序 </title> 

</head> 


Response. Write( "欢迎 学 习 ASP 程序 !< br >") 
Response. Write( "今天 日 期 为 : "&date( )&g"< br >") 
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Response. Write(request. ServerVariables("HTTP HOST")) 
先 > 

</body> 

</html > 


在 浏览 器 中 预览 ,效果 如 图 8-1 所 示 。 


-个 简单 的 AS? 程 序 - Windows Internet Erplorer 


E E 9 
四 FE -昌国 国 的 亿 扫 雪 去 收 W 天 名 全 -总 团 " 3 加 

地 址 四 ) 御 http://1ocalhost/website_asp/chapter08/Ri9-1. asp > 
欢迎 学 习 ASP 程 序 | 


今天 日 期 为 ，2011-3-16 
localhost 


图 8-1 简单 ASP 程序 运行 结果 


一 个 简单 的 ASP 程序 可 以 包括 以 下 三 部 分 。 

(1) 普通 的 HTML 文件 。 

(2) 服务 器 端的 Script 程序 代码 ,位 于 二 %…% 二 之 内 的 程序 代码 。 

(3) 客户 端的 Script 程序 代码 ,位 于 一 Script 二 …< 一 /Script 二 之 内 的 程序 代码 。 

注意 : 

(1) ASP 约定 ,所 有 服务 器 端的 Script 程序 代码 均 须 放 在 二 %…% 沁 之 间 , 即 把 以 前 的 
脚本 语言 写 在 二 %…% 沁 之 间 。 

(2) 在 ASP 中 ,VBScript 是 默认 的 脚本 语言 ,如 果 要 在 ASP 网 页 中 使 用 其 他 的 脚本 语 
言 。 可 以 用 以 下 的 方法 : 

<% @Language = "VBScript" %> 脚本 语言 为 VBScript 

<% @Language = "JavaScript" %> 脚本 语言 为 JavaScript 


知识 4 ASP 内 置 对 象 概述 


ASP 之 所 以 简单 实用 ,主要 是 因为 它 提供 了 功能 强大 的 内 部 对 象 和 内 部 组 件 。 其 中 5 
大 内 部 对 象 包括 Request、Response、Session、Application 和 Server, 其 简要 说 明 如 表 8-1 
所 示 。 
表 8-1 ASP 的 内 部 对 象 


对 象 功 能 
Request 从 客户 端 获取 数据 
Response 向 客户 端 输 出 数据 
Session 记载 特定 客户 的 会 话 信息 
Application 记载 同一 个 应 用 程序 中 的 所 有 用 户 之 间 的 共享 信息 


Server 创建 COM 对 象 和 Scripting 组 件 等 
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知识 5 利用 Request 对 象 从 客户 端 获 取信 息 


1. Request 对 象 简介 

当 浏 览 器 向 服务 器 请 求 页 面 时 , 这 个 行为 就 被 称 为 一 个 Request( 请 求 )。 可 以 使 
Request 对 象 访问 任何 基于 HTTP 请 求 传递 的 所 有 信息 ,包括 从 HTML Form 表单 用 Post 
方法 或 Get 方法 传递 的 参数 .Cookie 和 ServerVariable 等 。Request 对 象 使 用 户 能 够 访问 
客户 端 发 送 给 服务 器 的 二 进 制 数据 。 

Request 对 象 成 员 包括 该 对 象 的 集合 .方法 和 属性 。 

Request 的 语法 : 


Request. collection | property | method 


Request 对 象 提 供 了 5 个 集合 : Form、QueryString、ServerVariables 、Cookies 和 
ClientCertificate。 这 里 主要 讲述 前 4 个 常用 集合 。 

(1) Form 。 

Form 集合 主要 通过 Post 方法 来 提取 发 送 到 HTTP 请 求 正 文中 的 数据 。 

语法 : 


Request. Form(element)[ (index)|.Count] 


参数 说 明 : 

element: 指定 HTML 表单 中 某 一 元 素 的 名 称 。 

index: 可 选 参数 ,使 用 该 参数 可 以 访问 某 参 数 中 多 个 值 中 的 一 个 。 它 可 以 是 1 到 
Request. Form (parameter). Count 之 间 的 任意 整数 。 

Count: 集合 中 元 素 的 个 数 。 如 果 参 数 未 关联 多 个 值 , 则 计数 为 1; 如 果 找 不 到 参数 , 计 
数 为 0。 

(2) QueryString 。 

QueryString 和 Form 一 样 ,都 可 以 取得 前 一 页 所 发 送 的 值 。 不 同 的 是 Form 是 利用 
Post 方法 通过 表单 取得 数据 ,而 QueryString 是 利用 Get 方法 通过 参数 取得 数据 。 
QueryString 集合 检索 HTTP 查询 字符 串 中 变量 的 值 ,HTTP 查询 字符 串 由 问号 “?” 后 的 
值 指定 。 

(3) ServerVariables。 

ServerVariables 是 用 来 存储 环境 变量 及 HTTP 标题 的 。 大 家 都 知道 ,在 浏览 器 中 浏览 
网 页 的 时 候 使 用 的 传输 协议 是 HTTP, 在 HTTP 的 标题 文件 中 会 记录 一 些 客户 端的 信息 ， 
如 客户 的 IP 地 址 等 ,有 时 服务 器 端 需要 根据 不 同 的 客户 端 信息 做 出 不 同 的 反应 ,这 时 候 就 
需要 用 ServerVariables 集合 获取 所 需 信 息 。 

语法 : 


Request. ServerVariables (服务 器 环境 变量 ) 


(4) Cookies。 
Cookie 其 实 是 一 个 标签 , 当 用 户 访问 一 个 有 唯一 标识 的 Web 站 点 时 , 它 会 在 用 户 的 硬 
盘 上 留 下 一 个 标记 ,下 一 次 访问 同一 个 站 点 时 ,站 点 的 页 面 会 查找 这 个 标记 。 每 个 Web 站 


& 

点 都 有 自己 的 标记 ,标记 的 内 容 可 以 随时 读 取 , 但 只 能 由 该 站 点 的 页 面 完 成 。 每 个 站 点 的 
Cookie 与 其 他 所 有 站 点 的 Cookie 存在 同一 文件 夹 中 的 不 同文 件 内 (可 以 在 Windows 目录 
下 的 Cookie 文件 夹 中 找到 它们 )。 一 个 Cookie 就 是 一 个 唯一 标识 客户 的 标记 ,Cookie 可 以 
包含 在 一 个 对 话 期 或 几 个 对 话 期 之 间 某 个 Web 站 点 的 所 有 页 面 共享 的 信息 ,使 用 Cookie 
还 可 以 在 页 面 之 间 交 换 信息 。 

Request 提供 的 Cookies 集合 允许 用 户 检索 在 HTTP 请 求 中 发 送 的 Cookie 的 值 。 这 
项 功能 经 常 被 使 用 在 要 求 认 证 客户 密码 以 及 电子 公告 板 `Web 聊天 室 等 ASP 程序 中 。 

Cookie 集合 的 语法 如 下 。 

设置 Cookie 的 值 : 


Reponse. Cookies(cookie) [ (key) | .attribute] = value 
读 取 Cookie 的 值 : 
variableName = Request. Cookies(cookie)[(key) | .attribute] 


参数 说 明 : 

cookie: 指定 要 检索 其 值 的 Cookie 名 ,必需 参数 。 

key: 可 选 参数 ,用 于 从 Cookie 字典 中 检索 子 关 键 字 的 值 。 当 某 个 Cookie 有 多 个 组 成 
的 元 素 , 即 该 Cookie 是 一 个 集合 时 , 则 key 可 以 作为 该 集合 中 的 元 素 的 序号 来 访问 其 中 的 
某 个 元 素 。 

attribute: 指 定 Cookie 自身 的 有 关 信 息 。 如 Expires 只 写 属 性 ,指定 Cookie 的 过 期 时 
间 ,如 果 没 有 指定 过 期 的 时 间 ,那么 当 Session 结束 时 则 Cookie 过 期 。 

2. 使 用 Form 获取 方法 

下 面 以 一 个 简单 的 例子 讲述 如 何 使 用 Form 集合 获取 表单 数据 。 

(1) 创建 一 个 表单 页 面 RW8-2. html, 代 码 如 下 。 


< html > 
<head > 
<title > 表单 页 面 </title> 
</head> 
<body> 
< form id = "forml" name = "forml" method= "post" action= "RW8— 2.asp"> 
请 输入 你 的 姓名 : 
<label> 
< input name = "username" type = "text" id = " username" /> 
</label> 
<p> 请 输入 你 的 密码 : 
< label> 
< input name = "password" type= "password" id= "password" /> 
</label > 
</p> 
<p> 你 最 喜欢 的 球 类 运动 时 : 
<label> 
< input type = "radio" name = "sport" value = "basketball" /> 
</label > 
篮球 


08 模 块 ASP 动态 扩展 


161 


162 


网 站 建设 与 管理 基础 及 实 训 (ASP 版 ) 


< label > 


< input type = "radio" name = "sport" value = "football" /> 
</label> 
足球 
< jlabel > 
< input type = "radio" name = "sport" value = "badminton"” /> 
</label > 
羽毛 球 </p> 
<p> 你 上 网 通常 是 : 
<label> 
< input name = "like" type = "checkbox" id = "like" value = "talking" /> 
聊天 </label > 
<label> 
< input name = "like" type = "checkbox" id = "like" value = "news" /> 
看 新 闻 </label > 
< label> 
< input name = "like" type = "checkbox" id = "like" value = "videos" /> 
看 电影 </label > 
<label> 
< input name = "like" type = "checkbox" id = "like" value = "games" /> 
玩 游戏 </label > 
</p> 
<p> 你 喜欢 的 科目 是 : < label > 
< select name = "subject" id= "subject"> 
< option value = "chinese"> 语 文 </option> 
< option value = "math"> 数 学 </option> 
< option value = "english"> 外 语 </option> 
< option value = "physical"> 物 理 </option > 
< option value = "chymistry"> 化 学 </option > 
</select > 
</label > 
</p> 
<p> 
< label> 
< input type = 
</label > 
< label> 
< input type = "reset" name = "Submit2"” value = " 重 置 " /> 
</label > 
</p> 
</form> 
</body> 
</html > 


(2) 创建 一 个 表单 处 理 页 面 RW8-2. asp, 网 页 代码 如 下 。 


submit" name = "Submit" value = "提交 " /> 


<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %> 
<% 

dim i 

response. Write(" 你 填写 的 用 户 名 称 是 : <br>") 


response. Write request. Form("username" ) 
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response. Write "<br>" 
response. Write( "你 填写 的 密码 是 : <br>") 
response. Write request. Form("password" ) 
response. Write "<br>" 
response. Write( "你 选择 的 喜欢 球 类 运动 选项 对 应 的 value 是 : <br>") 
response. Write request. Form("sport") 
response. Write "<br >" 
response. Write( "你 选择 的 上 网 选项 对 应 的 value 是 : <br >") 
for i=1 to request. Form("like").count 
response. Write request. Form("like")(i) 
response. Write "<br >" 
next 
response. Write(" 你 选择 的 科目 选项 对 应 的 value 是 : <br >") 
response. Write request. Form("subject") 
response. Write "<br>" 
%> 


(3) 表单 运行 结果 如 图 8-2 和 图 8-3 所 示 。 


马 表单 页 面 - Windows Internet Explorer 

文件 中 ”编辑 于 ) 查看 W) 收藏 和 ) 工具 人 帮助 由 Ea 
四 急 -上 昌 -回国 蛤 吃 失去 k 关 包 四 -下 加" 有 8 加 

地 址 见 ) 个 http://1localhost/website_asp/chapter08/BI8-2. htal ~ 图 转 到 证 ” 


请 输入 你 的 姓名 ， |zhangsan 
清 输 入 你 的 密码 ， |**eeee 


你 最 喜欢 的 球 类 运动 时 ， @ 篮球 O 〇 足球 O 〇 羽毛 球 
你 上 网 通常 是 ， 回 聊天 回 看 新 闻 回 看 电影 口 玩 游戏 
你 喜欢 的 科目 是 ， | 数学 w 


EE 


图 8-2 ”以 post 方式 提交 表单 


代码 说 明 : 
通过 上 面 的 例子 可 以 看 出 ,对 于 表单 中 单个 值 的 取 法 可 以 用 Request. Form( 元 素 名 


称 ) ,例如 Request. form("username")、Request. form("password") 等 。 而 对 于 多 选 框 等 有 
多 个 值 的 元 素 , 则 必须 利用 循环 语句 ,例如 上 例 获取 多 选 框 的 代码 如 下 。 


<% 

for i=1 to request. Form("like").count 
response. Write request. Form("like")(i) 
response. Write "<br >" 

next 

先 > 


当 不 指定 要 显示 的 表单 元 素 名 称 , 例 如 运行 语句 response. Write request. Form 时 , 则 
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http filocalhostfwebsite asp/ chapter08/EY8-2 asp — Yindors Inte- = Dx 
文件 中 编 癌 EE) 查看 W) 收 诚信) 工具 中 帮助 0 [3 


日 银 - 避 -回国 妇 记 抽 次 收 天 如 合 - 总 国 - 3 加 
地 址 四) 全 http://1ocalhost/website_asp/chapter08/RY8-2. asp v| 贺 亲 到 说 > 


你 填写 的 用 户 名 称 是 ， 

zhangsan 

你 填写 的 密码 是 ， 

123456 

你 选择 的 喜欢 球 类 运动 选项 对 应 的 value 是 : 
basketball 

你 选择 的 上 网 选项 对 应 的 value 是 ， 
talking 

news 

wideos 

你 选择 的 科目 选项 对 应 的 value 是 ， 


math 


图 8-3 以 Form 集合 获得 表单 数据 


输出 结果 为 通过 符号 *“&.” 连 接 起 来 的 表单 项 及 其 值 (中 间 用 二 号 连接 ) 的 组 合 。 输 出 结果 如 
下 所 示 。 


username = zhangsan&password = 123456&sport = basketball&like = talking&like = news&like = 
videos&subject = math 


3. 使 用 QueryString 获取 方法 

下 面 创建 表单 和 ASP 程序 ,用 Request 对 象 的 QueryString 集合 获取 表单 提交 的 数据 
并 显示 。 详 细 步 又 如 下 。 

(1) 修改 表单 页 面 RW8-2. html, 将 其 表单 method 属性 改 为 get。 页 面 跳 转 的 action 
指定 为 RW8-3. asp。 


(2) 修改 表单 处 理 页 面 RW8-2. asp 中 的 代码 并 另存 为 RW8-3.asp。 代 码 如 下 。 


<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" 和 > 
<% 
dim i 
response. Write(" 你 填写 的 用 户 名 称 是 : < br >") 
response. Write request. QueryString( "username") 
response. Write "<br >" 
response. Write(" 你 填写 的 密码 是 : <br>") 
response. Write request. QueryString( "password") 
response. Write "<br >" 
response. Write( "你 选择 的 喜欢 球 类 运动 选项 对 应 的 value 是 : <br>") 
response. Write request. QueryString( "sport") 
response. Write "<br>" 
response. Write( "你 选择 的 上 网 选项 对 应 的 valve 是 : <br >") 
for i=1 to request. QueryString("like").count 
response. Write request. QueryString("like" )(i) 
response. Write "<br >" 
next 


A 


response. Write( "你 选择 的 科目 选项 对 应 的 value 是 : <br >") 
response. Write request. QueryString( "subject") 
> 


(3) 运行 结果 如 图 8-4 和 图 8-5 所 示 。 


当 表单 页 面 - Windors Internet Exzplorer 

文件 下 ) ”编辑 下 ) 查看 吊 收 产 @) 工具 CI) 帮助 中 E23 
加 PE- 加- 国 国 软 记 扫 坟 去 收 V& 天 名 所 - 马 回 -3 回 

地 址 | 俩 http://1oculhost/website_asp/chapter08/R18-2. htnl > 


请 输入 你 的 姓名 ， |zhangsan 

清 输 入 你 的 密码 ， |eeeeee 

你 最 喜欢 的 球 类 运动 时 ， @ 篮球 O 〇 足球 〇 羽毛 球 

你 上 网 通常 是 ， 回 聊天 回 看 新 闻 回 看 电影 口 玩 游戏 


图 8-4 以 get 方式 提交 表单 


http://localhost/uebsite_asp/ehapter08/RY-3. asp?userneame=zhangsanhpassword -， ~ OD X 


文件 中。 编辑) 查看 收 疗 人 0 工具 中 帮助 由 
四 ER -上 国 国 的 闪 搜 索 去 收 评 天 名 请 - 昌 加- 3 加 
色相 ) 多 http:/11ocalhostywebsite_asp/chapter08/BY6-3 asp?usernant=zhangsanhpas Y 园区 到 


你 填写 的 用 户 名 称 是 ， 


123456 


A 二 : 
basketball 

你 选择 的 上 网 选项 对 应 的 value 是 ， 

talking 

news 


ideos 
你 选择 的 科目 选项 对 应 的 value 是 ， 
math 


图 8-5 以 QueryString 集合 获取 表单 数据 
通过 比较 图 8-3 和 图 8-5 可 以 看 出 ,图 8-5 的 地 址 栏 内 附加 了 提交 表单 中 各 参数 名 称 及 
其 值 。 地 址 栏 asp 文件 名 后 附加 了 如 下 多 对 参数 和 参数 值 。 


?username = Zhangsan&password = 123456&sport = basketball&like = talking&like = news&like = 
Videos&subject = math&Submit = SCC% El SBDS BB 


也 就 是 说 ,在 目标 页 面 的 地 址 栏 中 会 显示 表单 总 共 传递 了 多 少数 据 , 各 参数 的 名 字 和 值 
都 一 目 了 然 。 这 样 安全 性 就 降低 了 ,而 且 get 方式 传递 的 数据 量 也 比 post 方式 少 ,因此 传 
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输 敏 感 信 息 如 密码 和 账号 等 信息 时 不 能 用 get 方式 。 
在 定义 超 链接 时 也 可 以 在 其 后 面 带 参数 ,一 般 就 是 在 跳 转 的 目标 地 址 后 面 用 *?” 连 接 参 
数 名 及 参数 值 ,如 “username 二 zhangsan” ,车 有 多 个 参数 则 用 “&” 隔 开 。 如 以 下 超 链 接 。 


<a href = "RW8 — 3.asp 

?username = zhangsan&password = 123456&sport = basketball& 
like= talking&like = news&like = videos&subject = math"> 
跳 转 到 RW8-3.asp 并 显示 数据 </a> 


运行 含有 该 超 链 接 的 网 页 并 单 击 超 链 接 后 ,运行 结果 和 图 8-5 一 致 。 
超 链 接 带 参数 的 使 用 方式 在 动态 网 站 制作 中 应 用 非常 广泛 ,例如 超 链 接 : 


<a href = "editnews.asp?newsID = 100" target = " blank"> 编 辑 <a> 


该 超 链 接 带 有 新 闻 的 唯一 编号 ,这 样 在 新 闻 编辑 页 面 editnews. asp 就 可 以 通过 这 个 编 
号 提取 该 条 新 闻 供用 户 编辑 。 当 然 新 闻 的 编号 也 可 以 从 数据 库 中 提取 。 如 超 链接 : 


<a href = "editnews.asp?newsID= <% = rs("newsID") $>"> 编 辑 </a> 


该 超 链接 可 以 放 到 新 闻 的 浏览 页 面 为 任何 一 条 新 闻 提 供 编辑 功能 。 当 需要 给 新 闻 提 供 
删除 功能 时 ,可 通过 如 下 超 链接 实现 。 


<a href = "deletenews.asp?newsID=<$% = rs("newsID") %>"> 删 除 </a> 


4. 使 用 ServerVariables 获取 方法 

创建 ASP 程序 ,用 来 查 明 访问 者 浏览 器 的 类 型 .IP 地 址 和 服务 器 软件 等 。 详 细 步 又 如 
下 所 示 。 

(1) 新 建 一 个 ASP 网 页 RW8-4. asp, 输 入 如 下 代码 。 


<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %> 
<html> 
<body> 
< table width= "402" height = "265" border = "2" align = "center" cellpadding = "0" cellspacing = 
"0" bordercolor = " #666666"> 
<tr> 
<td width= "179"><b> 你 的 浏览 器 版 本 :</b></td> 
< td width = "223">< %Response. Write(Request. ServerVariables("http user agent"))%></td> 
</tr> 
<tr> 
<td><b> 你 的 IP 地 址 :</b></td> 
<td><%Response. Write(Request. ServerVariables( "remote addr")) %></td> 
</tr> 
<tr> 
<td><b> 你 的 DNS:</b></td> 
<td><%Response. Write(Request. ServerVariables( "remote host")) %></td> 
</tr> 
<tr> 
<td>< b> 请求 方式 :</b></td> 
<td><%Response. Write(Request. ServerVariables("request method")) %$></td> 
</tr> 
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<tr> 
<td><b> 服 务 器 名 称 :</b></td> 


< td><%Response. Write( Request. ServerVariables( "server name")) $></td> 
</tr> 


<tr> 
< td>< b> 服务器 端口 :</b></td> 


< td><%Response. Write(Request. ServerVariables( "server port")) %></td> 
</tr> 


<tr> 
< td>< b> 服务 器 软件 的 名 称 和 版 本 :</b></td> 


<td><$%Response. Write(Request. ServerVariables("server software")) %></td> 
</tr> 


</table> 
</body> 
</html > 


(2) 程序 运行 结果 如 图 8-6 所 示 。 


已 serveryariables 和 集合 的 应 用 - Vindovs Internet Explorer = 
文件 中 ”编辑 人 E) 查看 如 收 诚 ) 工具 [I) 帮助 他 EE 
OF 加 国 国 的 只 扫 雪 去 收 训 大 如 启 - 马 加- 3 回 


地 址 加 ) | 外 http://1ocslhost/website_asp/chapter06/R16-4. asp > EE Wd 


ozilla/4.0 (compatible; 
你 的 浏览 器 版 本 : SIE 6.0; Windows NT 5.2; 


; .ET CLR 1.1.4322) 


| 


图 8-6 用 ServerVariables 集合 获取 服务 器 参数 


注意 : ServerVariables 集合 中 还 有 许多 其 他 服务 器 环境 变量 ,要 了 解 更 多 其 他 服务 器 


环境 变量 ,请 参考 W3CSchool 在 线 教 程 (http://www. w3cschool. cn/ ) 。 
5. 使 用 Cookies 记录 用 户 信息 


下 面 通过 一 个 例子 来 展示 一 下 如 何 读 取 Cookie。 设 计 一 个 登录 程序 ,利用 Cookie 保存 


用 户 登 录 信息 。 详 细 步 骤 如 下 所 示 。 


(1) 准备 数据 库 连接 文件 conn. asp 和 ACCESS 数据 库 文件 data. mdb。 数 据 库 连 接 文 


件 的 代码 如 下 所 示 。 


<% 
db = "data/data. mdb" 
Set conn = Server. CreateObject ("ADODB. Connection") 
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url = "Provider = Microsoft. Jet. OLEDB. 4. 0;Data Source = "& Server. MapPath( db) 
conn. Open(url) 
先 > 


(2) 创建 index. asp 网 页 文件 ,代码 如 下 。 


<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %> 
<html> 
<head> 
<meta http - equiv= "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 网 站 首页 </title> 
</head> 
<body> 
这 里 是 网 站 首页 ! 
< 第 
if Request. Cookies("user")("UserName") ="" then 
response. Write "<a href = login. asp> 登 录 </a>" 
else 
Response. Write Request. Cookies("user")("UserName") &"&nbsp;" 
response. Write( "欢迎 回来 !&nbsp;") 
response. Write "<a href = loginout.asp > 退出 </a>" 
end if 
多 > 
</body> 
</html > 


(3) 创建 login. asp 网 页 文件 ,代码 如 下 。 


<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %> 
<html> 
<head> 
<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 登 录 页 面 </title> 
</head> 
<! -- #include file= "conn.asp" --> 
<% 
session. timeout = 30 
username = trim(Request. Form( "username")) 
pwd = trim(Request. Form("pwd" )) 
savetime = request. Form( "savetime") 
if username=" "or pwd="" then 
Response. Redirect("login.asp") 
end if 
sql= "Select * fromuserl where namel = '"&username&"'and password= 


Set rs = conn. Execute( sql) 
if not rs. eof then 
Session("name" ) = username 
Response. Cookies( "user") ("UserName") = username 
Response. Cookies( "user") ("Password") = pwd 
Response. Cookies( "user").Expires = (now() + savetime) ' 设 置 Cookie 过 期 时 间 
Response. Redirect "index.asp" 
end if 
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%> 

<body> 

< form id= "forml" name = "forml" method = "post" action = "login.asp"> 
一 这 里 省 略 了 表单 内 部 内 容 

</form> 

</body> 

</html > 


(4) 创建 loginout. asp 网 页 文件 ,代码 如 下 。 


<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %> 
< 
session("name") = 
Response. Cookies( "user").Expires= (now()—1) 

Response. Write( "< script Language = javascript > alert(' 退 出 登录 成 功 !') ;location. href('index. 
asp');</script >") 

Response. End( ) 

$%> 


(5) 运行 index. asp 网 页 代码 ,效果 如 图 8-7 所 示 。 


下 网 站 首页 - Yindows Internet Explorer 
文件 下 编辑 于 ) 查看 W) 收藏 和 ) 工具 CD) 帮助 [9 


加- 加 国 国 的 部 扫 雪 容 收 天 全 合 - 急 团 "- #8 加 
地 直 乞 ) 赴 http://localhestywebsite_aspychapter08/cookies/index asp ”| 加 35) 入 R38 > 


这 里 是 网 站 首页 | 登录 


鲍 丰 地 Intranet 


图 8-7 登录 网 站 前 的 网 站 首页 


(6) 单 击 “ 登 录 ” 超 链接 ,进入 登录 页 面 .输入 用 户 名 和 密码 ,选择 登录 信息 保留 时 间 ,如 
图 8-8 所 示 。 


忆 号 录 页 面 - Yindows Internet Erplorer 
文件 四 ”编辑 E) 查看 WW) 收藏 和 ) 工具 CD) 帮助 o) [3 


四 ER -上 四 -回国 的 疡 搜索 安 收 天 本 让- 号 回 - #4 加 
地 址 加 | 罩 http://lecalhest/website_aspy/chapter0e/cockies/login asp 图 轩 到 入 二 >” 


请 输入 您 的 登录 信息 


用 户 名 jwaw 


晤 本 地 Intranet 


图 8-8 登录 页 面 
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(7) 单 击 “ 登 录 ” 按 钮 后 页 面 跳 转 到 index. asp 网 页 ,如 图 8-9 所 示 。 


于 网 站 首页 - Windows Internet Erplorer 
文件 中 ”编辑 EE) 查看 YW) 收藏 4) 工具 CD) 帮助 00 


四 FE -加 国 国 的 记 扫 雪 说 收 V 天 全 全 -总 团 "- #3 加 
地 址 四 手 Mttp://1ocalhost/website_asp/chapter08/eookies/index. asp 局 | 图 9 下 


这 里 是 网 站 首页 | wdw 欢迎 回来 ! 退出 


鲍 本 地 Intranet 


图 8-9 登录 网 站 后 的 网 站 首页 


从 运行 结果 图 8-7 一 图 8-9 可 以 看 出 ,用 户 的 登录 信息 被 保存 到 本 地 Cookie 中 了 ,在 用 
户 设置 的 Cookie 过 期 时 间 之 内 , 当 用 户 再 次 访问 网 站 时 ,网 站 可 以 直接 从 Cookie 中 读 取 用 
户 以 前 的 登录 信息 。 

Cookie 的 应 用 相当 广泛 ,凡是 需要 存储 用 户 本 地 信息 的 地 方 都 可 以 用 到 Cookie, 比 如 
以 下 几 个 应 用 。 

(1) 通过 Cookie 记录 一 年 内 用 户 访问 站 点 的 次 数 ,第 一 次 显示 “首次 访问 ”, 以 后 显示 
“第 几 次 访问 ”。 

(2) 电子 商务 网 站 可 通过 Cookie 记录 用 户 在 网 站 中 搜索 的 常用 关键 字 信息 ,以 便 给 用 
户 推荐 相关 商品 。 

(3) 在 做 网 络 调查 时 也 可 以 利用 Cookie 记录 用 户 所 填写 的 内 容 , 用 户 在 下 次 填写 相同 
网 络 调查 问卷 时 即 可 提取 以 前 的 记录 在 Cookie 中 的 信息 ,这 样 可 以 大 大 提高 网 络 调查 的 速 
度 和 效率 。 

知识 6 利用 Response 对 象 向 客户 端 输出 信息 


1. Response 对 象 简介 

Response 对 象 被 用 来 从 服务 器 上 发 送信 息 给 客户 端 ,就 是 将 程序 执行 后 的 结果 在 页 面 
上 和 输出。 包括 将 运行 结果 直接 输出 在 页 面 上 , 重 定 向 浏览 器 跳 转 到 另 一 个 页 面 ,设置 
Cookie 的 值 等 。 其 对 象 成 员 包 括 该 对 象 的 集合 .方法 和 属性 。 


语法 : 

Response .collection | property | method 

Collection( 集 合 ) 

Response 对 象 只 有 一 个 集合 一 一 Cookie, 它 用 来 在 客户 端 写 人 相关 数据 ,以 便 日 后 使 用 。 
语法 : 


Response. Cookies(Cookie)[ (key) |.attribute] = value 


这 里 的 Cookie 是 指定 Cookie 的 名 称 。 而 如 果 指 定 了 key, 则 该 Cookie 就 是 一 个 字典 。 
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attribute 指定 了 Cookie 自身 的 有 关 信 息 ,attribute 参数 可 以 是 下 列 之 一 。 

Domain: 若 被 指定 , 则 Cookie 将 被 发 送 到 对 该 域 的 请 求 中 去 。 

Expires: 指定 Cookie 的 过 期 日 期 。 为 了 在 会 话 结束 后 将 Cookie 存储 在 客户 端 磁盘 
上 ,必须 设置 该 日 期 。 若 此 项 属性 的 设置 未 超过 当前 日 期 , 则 在 任务 结束 后 Cookie 将 到 期 。 

HasKeys: 指定 Cookie 是 否 包含 关键 字 。 

Path: 若 被 指定 , 则 Cookie 将 只 发 送 到 对 该 路 径 的 请 求 中 ; 如 果 未 设置 该 属性 , 则 使 用 
应 用 程序 的 路 径 。 

下 面 通 过 几 段 简单 的 代码 来 介绍 一 下 Cookie 的 用 法 。 

(1) 建立 一 个 不 包含 Key 的 Cookie。 

<% Response. Cookies("User" ) = "zhangsan" %> 

(2) 建立 包含 Key 的 Cookie。 


< 和 

Response. Cookies("User") ("Name" ) = "ZhangSan” 
Response. Cookies( "User") ("password") = "123456" 
先 > 


(3) Cookie 属性 的 设置 。 


' 设 置 Cookie 的 有 效 期 到 某 一 天 可 以 用 以 下 代码 : 

<% Response. Cookies("User" ). Expires = #2012-12-01# $%> 
"设置 Cookie 的 有 效 期 为 一 周 可 以 用 以 下 代码 : 

< 凶 Response. Cookies("User" ) .Expires =now+7 %> 

"使 Cookie 失效 可 以 用 以 下 代码 : 

<% Response.Cookies ("User"). Expires =now—-1 %> 
Property( 属 性 ) 

Response 对 象 的 常用 属性 有 下 面 几 个 。 

(1) Buffer。 

Buffer 属性 指示 是 否 缓冲 页 输出 , 即 是 否 将 网 页 内 容 存储 于 缓冲 区 。 
语法 : 


Response. Buffer = True/False 

注意 : 本 名 一 定 要 放 在 网 页 的 开头 。 

(2) Charset。 

Charset 属性 用 来 设置 响应 给 浏览 器 的 语言 ,将 字符 集 名 称 附加 到 Response 对 象 中 
content-type 标题 的 后 面 。 

语法 : 

Response. Charset = 语言 名 称 

对 于 不 包含 Response. Charset 属性 的 ASP 网 页 ,contenttype 标题 将 为 content-type: 
text/html。 

例如 ,在 ASP 网 页 中 运行 如 下 代码 : 


<% Response. Charset = "gb2312" $$> 
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将 产生 以 下 结果 : 


content — type: text/html; charset = gb2312 


需要 注意 的 是 , 当 某 个 页 面包 含 多 个 含有 Response. Charset 的 标记 时 ,页 面 字符 集 将 
被 设置 为 该 页 中 Response. Charset 的 最 后 一 个 实例 所 指定 值 。 

(3) ContentType。 

ContentType 属性 指定 服务 器 响应 的 HTTP 文件 类 型 ,如 果 未 指定 ContentType, 默 
认为 text/HTML。 

语法 : 


Response. ContentType = 文件 类 型 
常见 的 ContentType 属性 可 以 取 如 下 的 一 些 值 : 


Response. ContentType = "text/HTML" 

Response. ContentType = "text/PLAIN" 

Response. ContentTYpe = " Image/GIF" 

Response. ContentType = " Image/JPEG" 

Response. ContentType = "application/vnd. ms - excel" 

(4) Expires。 

Expires 属性 用 来 设置 ASP 网 页 保留 在 浏览 器 cache 中 的 时 间 , 以 分 钟 计算 。 

语法 : 

Response. Expires = 分 钟 数 

如 果 用 户 在 某 个 页 面 过 期 之 前 又 回 到 此 页 ,就 会 显示 缓冲 区 中 的 页 面 ; 如 果 设 置 
Response. Expires 二 0, 则 可 使 缓存 的 页 面 立 即 过 期 。 这 是 一 个 较 实用 的 属性 ,例如 为 了 确 
保 用 户 登 录 账 号 安全 , 当 客 户 通过 ASP 的 登录 页 面 进入 Web 站 点 后 ,应 该 利用 该 属性 使 登 
录 页 面 立即 过 期 。 

(5) ExpiresAbsolute。 

ExpiresAbsolute 属性 设置 保留 在 cache 内 的 网 页 的 确切 到 期 日 期 和 时 间 。 

语法 : 

Response. ExpiresAbsolute = 日 期 及 时 间 

在 未 到 期 之 前 , 若 用 户 返 回 到 该 页 ,该 缓存 中 的 页 面 就 显示 ; 如 果 未 指定 时 间 , 该 主页 
在 当天 午夜 到 期 ; 如 果 未 指定 日 期 , 则 该 主页 在 脚本 运行 当天 的 指定 时 间 到 期 。 例 如 ,如 下 
示例 指定 页 面 在 2012 年 4 月 12 日 上 午 9:00:30 到 期 。 


Response. ExpiresAbsolute = # April 12,2012 9:00:30# 


(6) IsClientConnected 。 
IsClientConnected 属性 用 来 判断 浏览 器 是 否 仍 和 服务 器 相连 接 。 
语法 : 


Response. IsClientConnected 
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它 的 响应 值 会 是 True/False。 

Method( 方 法 ) 

(1) Write。 

Write 方法 是 平时 最 常用 的 方法 之 一 , 它 是 将 指定 的 字符 串 输出 到 浏览 器 。 

语法 : 

Response. Write ("字符 串 "/ 函 数 ) 

例如 ,执行 如 下 语句 : 

< 名 Response. Write(" 学 习 ASP 是 一 件 很 有 趣 的 事情 !") > 


将 在 页 面 中 输出 学习 ASP 是 一 件 很 有 趣 的 事情 ! "这 句 话 。 因 为 Response. Write 使 
用 非常 频繁 ,可 以 将 它 简 化 为 =", 这样 上 面 的 语句 就 可 以 简化 为 语句 二 %== "学习 ASP 是 
一 件 很 有 趣 的 事情 性 多 二 。 

(2) Redirect。 

Redirect 方法 使 浏览 器 立即 重 定向 到 程序 指定 的 URL。 

语法 : 


Response. Redirect("url") 


这 也 是 一 个 经 常用 到 的 方法 ,这 样 程序 员 就 可 以 根据 客户 的 不 同 响应 ,为 不 同 的 客户 指 
定 不 同 的 页 面 或 根据 不 同 的 情况 指定 不 同 的 页 面 。 例 如 ,执行 如 下 语句 : 

<% Response. Redirect("www. sina.com.cn") %> 

将 使 当前 网 页 重 定向 到 新 浪 网 。 

(3) End, 

End 方法 使 Web 服务 器 停止 处 理 脚本 并 返回 当前 结果 。 即 文件 中 剩余 的 内 容 将 不 被 
处 理 。 

语法 : 

Response. End 


(4) Clear。 

用 来 将 缓冲 区 数据 清除 掉 , 但 Clear 方法 只 清除 响应 正文 而 不 清除 响应 标题 。 

语法 : 

Response. Clear 

需要 注意 的 是 ,如 果 没 有 将 Response. Buffer 设置 为 True , 则 该 方法 将 导致 运行 时 错误 。 
(5) Flush, 

Flush 方法 用 于 将 缓冲 区 中 的 数据 向 浏览 器 输出 。 

语法 : 

Response. Flush 


需要 注意 的 是 ,这 个 指令 也 只 能 在 将 Response. Buffer 设置 为 True 时 才能 使 用 ,否则 
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会 产生 错误 。 
2. 输出 网 页 内 容 为 Excel 文档 
利用 ContentType 属性 可 以 将 ASP 网 页 中 表格 数据 输出 为 Excel 文档 ,详细 步骤 如 下 。 
(1) 制作 ASP 网 页 RW8-6.asp, 输 入 如 下 代码 。 


<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %> 

<%response. ContentTYpe = "application/vnd. ms — excel" %> 

<html> 

<body> 

< table width= "305" height = "168" border = "1" align = "center" cellpadding = "0" cellspacing = 
"0" bordercolor = " #000000"> 

<tr> 

<thwidth="73" height = "63"> 姓 名 </th> 

<thwidth="78"> 学 号 </th> 


<thwidth="73"> 性 别 </th> 
<thwidth="71"> 年 龄 </th> 
<thwidth="71"> 年 级 </th> 
</tr> 
<tr> 


<td> 张 三 </td> 
<td> 0910001 </td> 
<td> 男 </td> 

<td> 19 </td> 
<td> 09 级 </td> 
</tr> 

<tr> 
<td> 李 钰 </td> 
<td> 0910003 </td> 
<td> 女 </td> 

<td> 18 </td> 
<td> 10 级 </td> 
</tr> 

</table> 

</body > 

</html > 


(2) 运行 RW8-6. asp 网 页 后 ,弹出 如 图 8-10 所 示 的 对 话 框 。 


文件 下 载 - 安全 警告 


您 起 打开 或 保存 此 文件 吗 ? 


名 称 : RY6-6.xls 
天 ] 类 型 ， 且 crosoft Exeel 工作 表 ，469 字 节 


发 送 者 : localhost 


打开 人 @) 保存 E) ] [到 


oO We 


图 8-10 输出 网 页 为 Excel 文件 
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急 


(3) 单 击 “保存 ?会 把 生成 的 Excel 文件 保存 到 本 地 计算 机 , 单 击 “ 打 开 ” 则 会 在 浏览 器 
中 打开 生成 的 Excel 文件 ,如 图 8-11 所 示 。 


习 http://localhost/rebsite asp/chapterOB/RY9-6. asp — Windows 
文件 和 编辑 E) 视图 ) 插入 CQ) 格式 @) 工具 C) 数据 0) 甘 到 (” 雇 


GAE 日 国 国 的 记 扣 妆 收 天 如 胶合- 总 忆 3 回 
起 让 四 全 Mtp://1ochostjnebsite ssp/ehapter08/H18-6 ssp | 国 轩 到 和 汪 ” 
Al 到 姓名 


B C D E F .| 


A 
| 28 | sam | om 年 级 


910001 | 19|09 级 


910003| 18|10 级 


图 8-11 在 浏览 器 中 打开 Excel 文件 


将 网 页 内 存 输出 为 Excel 文档 是 非常 有 用 的 ,除了 上 面 输出 固定 数据 的 Excel 文档 外 ， 
也 可 以 通过 查询 数据 库 , 将 查询 结果 输出 为 Excel 文档 。 由 于 在 网 页 中 设置 打印 没有 在 
Excel 中 方便 ,因此 当 需 要 打印 网 页 数据 时 ,可 以 考虑 把 网 页 数据 输出 为 Excel 文档 。 


知识 7 Application 对 象 概述 


Application 对 象 是 一 个 共享 对 象 , 同 一 个 Web 应 用 中 的 所 有 程序 都 可 以 共享 其 信息 ， 
而 且 该 共享 信息 会 在 服务 器 运行 期 间 一 直 有 效 。 同 时 Application 对 象 还 有 控制 应 用 层 数 
据 的 方法 和 可 用 于 在 应 用 层 程 序 启动 和 停止 时 触发 过 程 的 事件 。Application 对 象 在 网 站 
应 用 中 比较 常见 ,如 经 常 看 到 的 网 站 访问 量 统计 、 同 时 在 线 人 数 统计 和 网 页 聊天 室 等 都 离 不 
开 Application 对 象 。 

Application 对 象 成 员 包 括 Application 对 象 的 集合 、 方 法 和 事件 。 

1. 自 定义 属性 (集合 ) 

Application 对 象 没 有 自己 的 属性 ,其 属性 由 用 户 根 据 需 要 自己 定义 ,这 些 自 定义 属性 
也 可 称 为 集合 。 

语法 ， 

Application(" 自 定义 属性 名 ") 


二 % Application("str") 二 "你 好 ,欢迎 学 习 ASP.”% 二 执行 完 后 ,该 对 象 的 属性 就 被 
保存 在 服务 器 上 ,直到 服务 器 关闭 为 止 。 故 可 用 二 % 二 Application("str")% 二 将 其 在 网 站 
中 任何 页 面 输出 。 这 样 就 实现 页 面 之 间 信 息 的 传递 。 

(1) Contents 集合 : 包含 所 有 Application 对 象 中 的 所 有 变量 ,但 不 包括 由 一 object 二 
元 素 所 建立 的 对 象 变量 。 

语法 : 


Application. Contents( 变 量 名 称 ) 
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例如 ,有 如 下 赋值 : 


Application("a") = "a" 
Application("b") = 127 
Application("c") = true 


则 有 Contents 集合 : 


Application. Contents("a") = "a" 

Application. Contents("b") = 127 

Application. Contents("c") = true 

(2) StaticObjects: 包含 由 二 object> 元 素 所 建立 的 所 有 对 象 变量 。 

StaticObjects 与 Contents 的 区 别 在 于 Contents 返回 的 是 不 包含 二 object 二 所 建立 的 对 
象 变量 ,而 StaticObjects 返回 的 是 由 一 object 二 所 建立 的 对 象 变量 。 

2. Method( 方 法 ) 

(1) Lock(): 锁定 Application 对 象 , 使 得 只 有 当前 的 ASP 页 对 内 容 能 进行 访问 。 

(2) Unlock(): 解除 对 Application 对 象 的 锁定 。 

这 两 个 方法 是 相对 的 ,Lock() 是 用 来 锁定 数据 ,而 Unlock() 是 用 来 解除 锁定 的 。 为 什 
么 要 锁定 数据 呢 ? 因为 Application 对 象 所 存储 的 内 容 是 被 共享 的 ,有 异常 情况 发 生 时 ,如 
果 没 有 锁定 数据 会 造成 数据 不 一 致 的 情况 发 生 , 并 造成 数据 的 不 正确 。 

3. 事件 

(1) OnStart: 第 一 个 访问 服务 器 的 用 户 第 一 次 访问 某 一 页 面 时 发 生 。 

(2) OnEnd: 当 最 后 一 个 用 户 的 会 话 已 经 结束 ,并 且 该 会 话 的 OnEnd 事件 的 所 有 代码 
已 经 执行 完毕 后 发 生 , 或 最 后 一 个 用 户 访问 服务 器 一 段 时 间 ( 一 般 为 20min) 后 仍然 没有 人 
访问 该 服务 器 产生 。 

需要 注意 的 是 ,这 两 个 方法 不 是 每 个 客户 端的 访问 都 会 执行 它们 的 代码 ,它们 在 整个 服 
务 器 运行 过 程 中 都 只 会 执行 一 次 ,一 个 是 在 服务 器 运行 一 开始 的 时 候 , 另 一 个 是 在 服务 器 的 
所 有 会 话 都 结束 的 时 候 。 而 且 想 要 定义 Application 对 象 的 OnStart 和 OnEnd 事件 代码 ， 
必须 将 其 写 在 Global. asa 这 个 文件 里 。 


知识 8 Session 对 象 概述 


Session 是 指 访问 者 从 到 达 某 个 特定 主页 到 离开 为 止 那 段 时 间 ,网 站 为 用 户 分 配 的 用 来 
保存 用 户 信息 的 对 象 。 可 以 使 用 Session 对 象 存 储 用 户 登 录 网 站 时 的 个 人 信息 。 当 用 户 在 
页 面 之 间 进 行 跳 转 时 ,存储 在 Session 对 象 中 的 变量 是 不 会 丢失 的 。 

当 用 户 请 求 来 自 应 用 程序 的 Web 页 时 ,如 果 该 用 户 还 没有 会 话 , Web 服务 器 将 自动 创 
建 一 个 Session 对 象 。 当 会 话 过 去 或 被 放弃 后 ,服务 器 将 终止 会 话 。 每 个 客户 端的 一 次 连 
接 服 务 器 过 程 就 是 一 个 Session ,若是 一 个 客户 端 用 户 在 同一 台 计 算 机 上 用 两 个 不 同 的 页 面 
连 上 相同 的 服务 器 ,那么 这 就 是 两 个 Session 。 

Session 对 象 的 成 员 比 Application 对 象 多 一 项 属性 , 即 集合 .属性 、 方 法. 事件。 和 
Application 一 样 ,Session 也 可 以 自 定义 属性 ,该 属性 也 可 称 为 集合 。 

1. 自 定义 属性 (集合 ) 

语法 : 
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和 


Session(" 自 定义 属性 名 ") 


CD Contents 集合 : 包含 所 有 Session 对 象 中 的 所 有 变量 ,但 不 包括 由 一 object> 元 素 
所 建立 的 对 象 变量 。 

例如 ,有 如 下 赋值 : 

Session("a") = "a" 


Session("b") =127 
Session("c") = true 


则 有 Contents 集合 : 


SAession. Contents("a") = "a" 


Session. Contents("b" ) = 127 
Session. Contents("c" ) = true 


(2) StaticObject 集合 : 包含 由 一 object 二 元 素 所 建立 的 存储 于 Session 对 象 中 的 所 有 
变量 的 集合 。 

2. 属性 

(1) SessionID: 只 读 , 长 整 型 ,定义 本 次 会 话 的 会 话 标识 符 。 每 一 个 会 话 服务 器 自动 分 
配 一 个 唯一 的 标识 符 。 可 以 根据 它 的 值 判断 两 个 用 户 是 谁 先 访 问 服务 器 。 

(2) Timeout: 可 读 / 可 写 , 整 型 ,为 会 话 定义 以 分 钟 为 单位 的 超时 限定 。 如 果 用 户 在 这 
个 时 间 内 没有 任何 动作 ,该 用 户 产生 的 会 话 自动 结束 ,默认 值 是 20。 

(3) CodePage: 可 读 /可 写 , 整 型 ,定义 用 于 在 浏览 器 中 显示 页 面 内 容 的 代码 页 。 代 码 
页 是 字符 集 的 数字 值 ,不同 的 语言 使 用 不 同 的 代码 页 。 

(4) LCID: 可 读 / 可 写 , 整 型 ,定义 发 送 给 浏览 器 的 页 面 地 区 标识 。LCID 是 唯一 标识 
地 区 的 一 个 国际 标准 缩写 。 

下 面 以 一 个 简单 的 例子 讲述 如 何 利用 Session 在 网 页 中 传递 数据 ,制作 两 个 简单 的 网 
页 ,在 一 个 网 页 中 创建 Session ,在 另 一 个 网 页 中 读 取 Session。 

(1) 制作 sessionSet. asp 页 面 , 输 入 如 下 代码 。 

< %(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %$> 

< 和 

Session("UserName") = " 张 三 ” 

Response. Write( Session( "UserName")) 

先 > 


<br> 
<a href = "sessionRead.asp"> Session 变量 传递 </a> 


(2) 制作 sessionRead. asp 页 面 , 输 入 如 下 代码 。 


< %(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" 要 > 

从 Session 中 读 取 的 用 户 名 : 

<%= Session("UserName") 当 > 

(3) 在 浏览 器 中 运行 sessionSet. asp 页 面 ,效果 如 图 8-12 所 示 。 

(4) 单 击 页 面 中 的 “Session 变量 传递 " 超 链接 ,打开 另 一 个 页 面 ,效果 如 图 8-13 所 示 。 
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已 设 置 session - Yindors Internet Erplorer 
文件 中) 编辑 @) 查看 WD 收 诚 和 ”工具 CT) 帮助 四 C9 


FE 昌 " 国 国 的 记过 六 收 8 天台 所 -坚固 -3 回 
地 址 四 扰 http://1ocalhost/website_asp/chapter08/Session/sessionSet.asp ” 加 于 到 计生 > 


张 三 
Session 变 量 传递 


砚 本 地 Intranet 


图 8-12 创建 Session 的 网 页 


马 读 职 session - Windews Internet Explorer 


文件 中 ”编辑 E) 查看 Q) 收 总 和) 工具 CD) 于 助 人 0 E93 
四 恨 -上 卓 加 国难 骨科 说 收 R 天 伯 合 -总 园 - 3 回 
地 址 四 ) | 炮 http://1ocalhost/website_asp/chapter08/Session/sessionResd asp | 国 ] 壬 到 泛 按 ”” 


从 Session 中 读 取 的 用 户 名 ， 张 三 


砚 本 地 Intraet 


图 8-13 读 取 Session 的 网 页 


从 图 8-12 和 图 8-13 可 以 看 出 ,在 网 站 中 一 个 页 面 设置 的 Session 变量 ,只 要 Session 没 
有 过 期 ,在 另 一 个 页 面 就 是 可 以 读 取 的 。 

Session 在 网 站 制作 中 应 用 非常 广泛 ,比如 可 以 用 Session 存储 用 户 的 登录 信息 ,在 其 
他 页 面 中 如 果 需 要 这 些 信息 时 就 可 以 随时 提取 出 来 ; 电子 商务 网 站 通常 用 Session 存储 用 
户 的 购物 信息 ,这些 信 息 在 用 户 结算 时 就 能 用 上 ; 许多 期 刊 网 站 用 Session 跟踪 用 户 使 用 网 
站 的 活动 , 当 用 户 超出 一 定时 间 ( 例 如 20min) 提 示 用 户 重 新 登录 等 。 

3 方法 

(1) Contents. Remove( "变量 名 "): 从 Session. Contents 集合 中 删除 指定 的 变量 。 

(2) Contents. Removeall( ): 删除 Session. Contents 集合 中 的 所 有 变量 。 

(3) Abandon( ) : 结束 当前 用 户 会 话 并 且 撤 销 当前 Session 对 象 。 

这 里 要 说 明 的 是 ,Session 对 象 中 的 Contents. Removeall( ) 和 Abandon( ) 是 有 区 别 的 ， 
执行 这 两 个 方法 都 会 释放 当前 用 户 会 话 的 所 有 Session 变量 ,不 同 的 是 Contents. 
Removeall( ) 单 纯 地 释放 Session 变量 的 值 而 不 终止 当前 的 会 话 , 而 Abandon( ) 除 了 释放 
Session 变量 外 还 会 终止 会 话 引 发 Session_OnEnd 事件 。 


4. 事件 

(1) OnStart: 当 ASP 用 户 会 话 产生 时 触发, 一旦 有 任 一 用 户 对 本 服务 器 请 求 任 一 页 面 
即 产生 该 事件 。 

(2) OnEnd: 当 ASP 用 户 会 话 结束 时 触发 , 当 使 用 Abandon( ) 方 法 或 超时 时 也 会 触发 
该 事件 。 


这 两 个 事件 和 Application 的 OnStart、OnEnd 事件 一 样 ,也 是 必须 放 在 Global. asa 文 
作 时 5 
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以 下 是 Session 和 Application 的 比较 。 
(1) 两 者 都 是 ASP 文件 共用 的 对 象 。Application 对 象 是 所 有 网 页 链接 者 共用 的 一 个 


对 象 ,Session 对 象 是 每 位 链接 者 独 有 的 对 象 。 


(2) 两 者 都 有 生命 周期 ,但 生命 周期 不 同 。Session 开始 于 新 链接 者 第 一 次 链接 时 ,终止 于 


链接 者 若干 时 间 内 没有 索取 过 任何 信息 ; Application 开始 于 IIS/PWS 开始 执行 且 出 现 第 一 个 
链接 者 的 时 候 , 终 止 于 若干 时 间 内 没有 任何 链接 者 索取 过 信息 ,或 IIS/PWS 关 闭 时 。 


(3) 两 者 都 有 OnStart 和 OnEnd 事件 代码 ,但 它们 发 生 的 时 间 不 同 。Application 的 


OnStart 事件 总 是 先 于 Session 的 OnStart 事件 执行 ; 同时 Session 的 OnEnd 事件 总 是 先 于 
Application 的 OnEnd 事件 执行 。 


知识 9 _ Server 对 象 概 述 
利用 Server 对 象 可 以 方便 地 对 服务 器 上 的 方法 和 属性 进行 访问 。 最 常用 的 方法 是 创 


建 ActiveX 组 件 的 实例 (CServer. CreateObject) 。Server 对 象 成 员 包 括 该 对 象 的 方法 和 
属性 。 


间 。 


1. 属性 

Server 对 象 只 有 ScriptTimeonut 一 个 属性 ,这 个 属性 是 用 来 设置 Script 程序 执行 的 时 
此 属性 的 设置 是 为 了 防止 程序 出 现 死 锁 。 

语法 : 

Server. ScriptTimeout = 秒 数 

需要 注意 的 是 ,这 个 设置 必须 放 在 ASP 文件 的 开头 ,否则 会 产生 错误 。 

2. 方法 

(1) CreateObject 

这 个 方法 是 Server 对 象 中 最 重要 的 方法 ,在 后 面 可 以 看 到 ,许多 功能 都 不 得 不 用 到 它 。 


它 用 于 创建 已 注册 到 服务 器 上 的 ActiveX 组 件 。 


方法 如 下 : 

Server. CreateObject( "ComponentName" ) 
例如 : 

Server. CreateObject( "ADODB. Connection") 


(2) HTMLEncode 
这 个 方法 可 以 输出 HTML 代码 ,通常 情况 下 ,浏览 器 将 “二 ”和 “二 ”中 间 的 符号 作为 系 


统 标记 ,不 会 显示 在 浏览 器 上 .如 果 想 在 浏览 器 上 显示 时 ,可 以 用 Server 对 象 的 
HTMLEncode 方 法 ,例如 : 


<% = Server. HTMLEncode("<H1l > 一 号 标题 </H1 >")%> 
输出 结果 是 : 
< 了 Hl > 一 号 标题 </H1 > 
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(3) MapPath 

该 方法 返回 指定 文件 的 相对 路 径 或 物理 路 径 。 

假定 c:\inetpub\wwwroot 为 服务 器 的 主 目录 ,在 ASP 页 面 中 输入 如 下 代码 : 
<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" 要 > 

<% = Server. MapPath("/")%><P> 

< 外 = Server. MapPath("/RW8— 1.asp") %$><P> 


<% = Server.MapPath("/RW" ) %><P> 
<% = Server. MapPath( "RW. txt") %><P> 


运行 以 上 代码 网 页 输出 如 下 : 


Cc:\inetpub\wwwroot 

Cc:\inetpub\wwwroot\RW8 — 1.asp 

Cc:\inetpub\wwwroot\RW 

E:\website asp\chapter08\RW. txt 

由 运行 结果 可 以 看 出 ,Server. MapPath("/") 返 回 的 永远 是 网 站 (服务 器 ) 的 主 目录 。 

Server. MapPath("/RW8-1. asp") 返 回 的 是 网 站 的 主 目录 加 上 字符 串 "RW8-1. asp"。 

Server. MapPath("/RW") 返 回 的 是 网 站 的 主 目录 加 上 字符 串 "RW"。 

需要 注意 的 是 ,"RW8-1. asp" 和 "RW" 可 以 存在 ,也 可 以 不 存在 ,这 里 只 是 将 它们 作为 
一 个 字符 串 来 考虑 ,到 调用 时 才 会 检查 它们 到 底 存 不 存在 。 

Server. MapPath("RW. txt") 返 回 的 是 当前 ASP 文件 所 在 的 目录 (本 例 为 网 站 虚拟 目 
录 ) 加 上 "RW. txt" 后 组 成 的 一 个 字符 串 。 

(4) URLEncode 

URLEncode 方法 是 将 URL 转换 为 字符 串 。 

它 的 语法 如 下 : 


Server. URLEncode( "URL 字符 串 ") 


虽然 是 转换 成 字符 串 ,但 是 一 些 特殊 符号 如 :“":"、"/"、".", 并 不 会 转换 成 和 原来 一 样 
的 字符 。 例 如 ,语句 二 % 二 Server. URLEncode("http://www. sina. com. cn")%> 输 出 为 ; 


http %3A% 2F %2Fwww%2Esina%2Ecom%2Ecn 


(5) Execute 
Execute 方法 是 在 一 个 ASP 程序 的 执行 过 程 中 ,去 执行 另 一 个 ASP 程序 ,等 执行 完 后 
再 回 到 当前 ASP 程序 所 在 的 页 面 ' 有 点 类 似 一 般 程序 语言 中 的 函数 调用 。 它 的 语法 是 : 


Server.Execute(URL) 


参数 URL 是 某 个 要 被 执行 的 Web 页 面 程序 ,并 且 执行 其 他 的 ASP 程序 时 ,会 将 当前 
页 面 的 状态 信息 带 到 其 他 的 页 面 。 

(6) Transfer 

Transfer 方法 的 作用 是 将 所 有 的 陈述 性 信息 (包括 所 有 的 Application 或 Session 变量 
以 及 Request 集合 中 的 所 有 项 目 信息 ) 从 一 个 Web 页 面 程序 发 送 到 另 一 个 Web 页 面 程序 ， 
并 且 发 送 过 去 之 后 页 面 不 再 返回 。 而 Request. Redirect 是 一 个 强制 性 的 页 面 跳 转 , 它 不 会 
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将 本 页 的 数据 信息 传递 到 要 跳 转 的 目标 页 面 ,Server. Execute 则 是 在 运行 完 目标 页 后 还 会 
回 到 调用 页 面 。 


知识 10 Global. asa 


Application 的 两 个 事件 (OnStart .OnEnd) 和 Session 的 两 个 事件 (OnStart .OnEnd) 都 
放 在 Global. asa 文件 中 。Global. asa 文件 必须 放 在 网 站 的 根 目录 下 才能 起 作用 。Global. 
asa 文件 的 基本 结构 如 下 : 


< Script Language = "JavaScript" Runat = "Server"> 
function Application OnStart( ) 
{ 

, 

function Application OnEnd( ) 

{ 

} 

function Session OnStart() 

{ 

} 

function Session OnEnd() 

{ 

} 

</script > 


一 个 Application 的 OnStart 事件 会 在 Session 的 OnStart 事件 之 前 被 触发 。Application 不 
会 像 Session 那样 在 每 一 个 新 用 户 登录 后 都 触发 ,而 是 只 触发 一 次 , 即 第 一 个 用 户 登 录 网 站 
时 触发 。 每 个 用 户 的 会 话 结束 时 都 会 触发 一 个 Session 的 OnEnd 事件 ,最 后 一 个 用 户 会 话 
结束 时 会 同时 触发 Application 和 Session 的 OnEnd 事件 ,但 Session 先 于 Application。 

利用 Global. asa 可 以 很 容易 实现 网 站 动态 在 线 人 数 的 统计 。 详 细 步 又 如 下 。 

(1) 在 网 站 根 目录 下 新 建 Global. asa 文件 并 输入 如 下 代码 。 


< Script language = "vbscript" runat = "server"> 

Sub Application OnStart 

Application("visitors")=0 

End Sub 

Sub Session OnStart 

Application. Lock 

Application( "visitors") = Application("visitors")+1 
Application. UnLock 

End Sub 

Sub Session OnEnd 

Application. Lock 

Application( "visitors") = Application("visitors")—1 
Application. UnLock 

End Sub 

</script > 


181 


182 ”网 站 建设 与 管理 基础 及 实 训 (ASP 版 ) 


室 


(2) 制作 RW8-9. asp 页 面 并 输入 如 下 代码 。 


<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %> 
<p> 本 站 现在 有 <%response. write(Rpplication("visitors") ) sg> 人 在 线 !</p> 


将 Global. asa 文件 放 在 站 点 根 目 录 下 ,然后 运行 RW8-9. asp, 运 行 结果 如 图 8-14 
所 示 。 
沁 网 站 在 线 人 数 统 计 - Windews Internet Explerer 
文件 四 编辑 到 ) 查看 0 收 总 ”工具 中 帮助 中 Ea 
9 加 - 国 国 他 用 抽 克 收 天 如 全- 总 团 " 强加 
地 址 四 ) | 机 http://1ocslhost/website_asp/chspter08/RY6.9.asp ww 国 轩 到 访 六 > 


本 站 现在 有 6 人 在 线 ! 


司 二 地 Intranet 


图 8-14 网 站 在 线 人 数 统计 


知识 点 拓展 


PWS 是 Personal Web Server 的 简称 , 即 个 人 Web 服务 器 ,是 为 个 人 发 布 网 页 开发 的 ， 
适用 于 小 规模 公司 的 内 部 网 , 仅 支 持 10 个 并 发 用 户 ,只 能 容纳 一 个 Web 站 点 ,提供 基本 的 
WWW 服务 和 简单 的 Web 管理 ,支持 ADO 访问 数据 库 。PWS 运行 于 Windows 9x/Me 平 
台 ,在 学 习 、 编 写 和 调试 ASP 页 面 时 常用 做 Web 服务 器 。 


模拟 制作 任务 


任务 ”制作 一 个 简单 的 聊天 室 


任务 背景 

当 网 站 需要 提供 一 个 公共 的 场所 供 在 线 人 员 交 流 时 可 以 制作 一 个 简单 的 聊天 室 。 
任务 要 求 

(1) 用 户 无 须 注册 登录 即 可 进入 聊天 室 。 

(2) 聊天 信息 可 以 立即 滚动 显示 给 所 有 用 户 。 

【技术 要 领 】Application 对 象 的 综合 使 用 。 

【解决 问题 】 聊 天 室 。 

【应 用 领域 】 网 页 数据 共享 。 

效果 图 

简单 ASP 网 页 聊天 室 运 行 效果 如 图 8-15 所 示 。 
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忆 asp 版 聊天 室 - Vindows Internet Explorer 

文件 下 ) 编辑 于) 查看 如 收藏 和 工具 帮助 0 

捐 -日 国 国 办 全 搜 索 友 收 Vk 如 全 -总 园 - 3 回 

抱 址 @) | 入 http: /flocelhost/rebsite_asp/ chatroom/ chatindex, asp x| 贺 革 到 说 性 > 


简单 ASP 网 页 聊天 室 


过 客 说 ,谢谢 您 ， 顶 一 个 1 
wdn 说 ， 主 要 内 容 有 ，CSS，html，vbscript，IIS 安 装配 置 和 


eee 说 ， 好 的 。 那 我 们 应 该 学 习 哪些 内 容 啊 | 


wdw 说 ，asp 是 一 门 很 好 学 的 web 编 程 技术 。 


图 8-15 简单 ASP 网 页 聊天 室 


任务 分 析 

这 一 任务 的 重点 是 网 站 信息 的 共享 ,也 就 是 要 求 每 个 进入 聊天 室 的 用 户 无 论 什 么 时 间 
所 发 的 留言 都 保存 下 来 。 这 时 需要 用 到 Application 对 象 。 

重点 和 难点 

Application 对 象 的 综合 使 用 , 典 入 式 框架 页 面 的 制作 。 

操作 步骤 

制作 一 个 简单 的 网 页 聊天 室 。 

(1) 创建 一 个 chatindex. asp 页 面 ,在 网 页 中 输入 如 下 代码 。 


<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" 和 > 
<head> 
<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title>asp 版 聊天 室 </title> 
<% 
dim liuyan, username 
username = Request. Form( "username") 
if trim(username) = "" then 
username = "过 客 " 
end if 
liuyan = Request. Form( "liuyan") 
if liuyan<>"" then 
Application. Lock( ) 
if Application("liuyan") = null then 
Application("liuyan") = "" 
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else 


Application("liuyan") = "<br >"g&username + " 说 : "&liuyangapplication("liuyan")&g"< br >" 
end if 
Application. UnLock( ) 
end if 
先 > 
</head> 
<body> 
<table width = "500" border = "1" align = "center" cellpadding = "0" cellspacing = "0"> 
<tr><tdalign= "center"> 简 单 ASP 网 页 聊天 室 </td></tr> 
<tr><td>< iframe src = "room.asp" name = "chatroom" width= "480" height = "150" scrolling= 
"auto"></iframe></td></tr> 
<tr><td> 
< form id = "forml" name = "forml" method= "post" action = ""> 
<br>< label > 姓名: < input name = "username" type= "text" id = "username" /></label> 
< label > < textarea name = "liuyan" cols = "66" rows = "5" jd = "liuyan"> </textarea > 
</label> 
< label >< input type = "submit" name = "Submit" value = "留言 " /></label> 
< label >< input type = "reset" name = "Submit2"” value = "清空 " /></label> 
</form> 
</td></tr> 
</table> 
</body> 
</html > 


(2) 创建 一 个 room. asp 页 面 ,在 网 页 中 输入 如 下 代码 。 


<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %> 
<%= Application("liuyan") %> 


代码 说 明 : 

(1) 对 Application( "liuyan") 访 问 时 ,做 了 Application. Lock() 操 作 , 这 样 可 以 保证 对 
共享 变量 Application("liuyan") 的 操作 不 会 发 生 错误 。 

(2) 在 chatindex. asp 页 面 中 嵌入 room. asp 页 面 的 代码 如 下 所 示 。 


< iframe src = "room.asp" name = "chatroom" width= "480" 
height = "150" scrolling = "auto"></iframe> 


实 训 ”利用 Session 创建 密码 保护 系统 


实 训 目 的 


有 些 网 页 可 能 不 想 让 无 关 的 人 看 到 ,例如 后 台 管理 页 面 。 这 时 可 以 创建 密码 保护 系统 
来 防止 无 关 的 人 看 到 不 想 公开 看 到 的 页 面 。 具 体 可 以 通过 会 话 (Session) 变 量 有 效 性 判断 
实现 对 网 页 的 密码 保护 。 


实 训 内 容 
利用 Session 创建 密码 保护 系统 。 
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实 训 过 程 


本 实 训 总 共 涉 及 一 个 简单 Access 数据 库 和 三 个 简单 ASP 网 页 。 首 先 创建 Access 数 
据 库 文件 users. mdb, 在 数据 库 中 创建 一 张 数据 表 users, 表 内 设计 三 个 字段 : id( 自 动 编 
号 ),username( 文 本 ) 和 password( 文 本 )。 三 个 ASP 网 页 名 字 分 别 为 index. asp,login. asp 
和 loginout. asp。 下 面 详细 讲述 这 三 个 ASP 网 页 的 设计 。 

(1) index. asp 网 页 的 主要 代码 如 下 。 


<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %> 
<html ><title > 网 站 首页 </title> 
<body> 
<p> 网 站 首页 。</p> 
< 
if session("allow") = "" or IsNull(session("allow")) then 
多 > 
请 <a href = "login.asp"> 登 录 </a> 
< 
else 
多 > 
欢迎 您 ,<% = Session("username" ) % >,<a href = "loginout. asp"> 注 销 </a> 
<% 
end if 
第 > 
</body> 
</html > 


(2) login. asp 网 页 的 主要 代码 如 下 。 


<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %> 
<$%Response. Buffer = True %> 
<html> 
<body> 
< 多 
if Request. Form("btnLogin") = "登录 "then 
UserName = trim(Request. Form("username")) 
Password = trim(Request. Form("password")) 
Set Conn = Server. CreateObject ("ADODB. Connection") 
set RS = server.createobject("adodb. recordset") 
url = "Provider = Microsoft. Jet. OLEDB. 4. 0;Data Source = "& Server. MapPath("users. mdb") 
Conn. Open(url) 
SQL = "Select * From users where username = '"& UserName &"'and password= '"& Password &"'" 
RS. open sql,conn,1,1 
if not RS. bof and not RS. eof then 
response. Write "< script language = 'JavaScript'> alert(' 登 录 成 功 !')</script >" 
Session("allow") = True 
Session("username") = UserName 
Response. Redirect "index.asp" 
Else 
RS. Close 
Conn. Close 
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Set RS = Nothing 
Set Conn = Nothing 
response. Write "< script language = 'JavaScript'> alert( ' 输 入 信息 有 误 , 登录 失败 !')</script >" 
End If 
end if 
多 > 
< form name = "Login" method = "Post" action = "login.asp"> 
<p> 用 户 名 : 
< input type = "text" name = "username" size = "20"> 
</p> 
<p> 密 snbsp; 码 : 
< input type = "password" name = "password" size= "20"> 
</p> 
<p> 
< input type = "submit" name = "btnLogin" value = "登录 "> 
</p> 
</form> 
</body> 
</html > 


(3) loginout. asp 网 页 的 主要 代码 如 下 。 


<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %> 

<title > 注销 登录 </title> 

< 和 

session("allow") = "" 

Response. Write("< script Language = javascript > 
alert(' 退 出 登录 成 功 !') ; location. href( 'index.asp');</script>") 

Response. End( ) 

先 > 

authorTest.asp 网 页 的 主要 代码 如 下 : 

<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %> 

<% Response. Buffer = True %> 

< 

Response. Buffer = True 

if session("allow") = "" or IsNull(session("allow") ) then 
response. Redirect "login.asp" 


运行 结果 如 图 8-16 一 图 8-18 所 示 。 


Pindows Internet Erplerer 


文件 到) 编辑 人) 查看 外 收藏 和 ) 工具 CD 帮助 0 
5E- © 国 国 多 人 PR 广 WR 天 局 合 - 站 四- #3 加 
直上 四 乔 http://1ocddhost/website asp/chapter08/shixuVindex. osp _” 国 和 到 党 ”区 和 执 ” 国 过 笃 


图 8-16 登录 前 的 网 站 首页 
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泊 登录 窗口 - Yindows Internet Explorer 
文件 如 编 得 到 ) 查看 W)。 收藏 W) 工具 G) 帮助 四 


昌 扫 -昌国 国 的 让 扫 有 去 届 RK 人 如 合 - 龟 团 -#8 回 


地 四 舌 http://Noeslhost/website osp/chapter08/shivelocin ep 固 和 到 这 E ” 痪 种 扫 ” 卫 入 虹 


用 户 名 ， ladnin 
密 码 ， we 


图 8-17 登录 窗口 


下 网 站 首页 - Vindovs Internet Ezplorer 
文件 四 ” 编 得 外 查看 WW 收藏 和 ) 工具 上 帮助 中 
昌 恨 -日 国 国 多 癌 扫 要 克 收 天 全 全- 号 四- $9 加 


此 站 多 | 狠 http://1ocuhost/rebsite_asp/chapter09/shixon/index. asp 司 园 和 到 iEE ” 痪 竺 执 ， 国 选择 


网 站 首页 。 


欢迎 您 ，admin, 注销 


图 8-18 登录 后 的 网 站 首页 


从 图 8-16 一 图 8-18 可 以 看 出 , 当 用 户 未 登录 之 前 会 提示 请 登录 。 当 用 户 正确 登录 后 会 
提示 相应 的 欢迎 信息 ,登录 后 还 可 以 单 击 注销? 超 链接 注销 用 户 登 录 信 息 。 注 销 功能 其 实 
就 是 清空 相关 Session 变量 的 值 ,如 Session("allow") 王 ""。 而 在 其 他 需要 进行 身份 验证 的 
网 页 ,只 需要 在 网 页 头 部 添加 如 下 几 条 代码 即 可 实现 访问 控制 。 

<% Response. Buffer = True %> 
<% 

if Session("allow") = "" or IsNull(Session("allow")) then 
response. Redirect "login. asp" 
end if 


> 


实 训 总 结 


本 实 训 主要 目的 是 让 学 生 掌 握 利 用 会 话 (Session) 变 量 实现 对 网 页 进行 访问 控制 。 同 
时 熟悉 会 话 (Session) 变 量 的 添加 和 清除 操作 ,熟悉 Response 对 象 的 相关 方法 的 使 用 。 让 
学 生 能 综合 运用 本 章 所 学 的 知识 制作 一 个 简单 的 功能 模块 。 
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综合 任务 


1. 创建 一 个 综合 表单 ,要 求 表单 中 有 输入 框 , 单 选 按钮 . 复 选 框 、 多 行文 本 框 和 下 拉 菜 
单 等 表单 元 素 。 并 分 别 用 Request 对 象 的 Form 集合 和 QueryString 集合 获取 表单 提交 的 
数据 并 显示 。 

2. 利用 Cookie 设计 一 个 计数 器 ,记录 一 年 内 用 户 访 问 站 点 的 次 数 ,第 一 次 显示 “首次 
访问 ”, 以 后 显示 “第 几 次 访问 ”。 

3. 利用 Application 对 象 制作 一 个 简单 的 网 页 聊天 室 , 并 将 聊天 记录 保存 到 用 户 的 
Cookie 中 ,下 次 用 户 登录 时 还 能 看 到 聊天 记录 。 


网 页 数据 库 扩展 


所 谓 数据 库 , 就 是 按照 一 定 的 数据 模型 组 织 存储 在 一 起 的 能 为 多 个 用 户 共享 的 ,与 应 用 


程序 相对 独立 、 相 互 关联 的 数据 联合 。 本 模块 主要 讲解 ADO 对 象 模型 .ADO 访问 数据 库 
的 各 种 方式 和 利用 常用 ADO 对 象 实现 对 数据 库 的 访问 等 内 容 。 


能 力 目标 

.能 熟练 创建 系统 DSN 

.能 使 用 多 种 方式 连接 Access 数据 库 
能 使 用 Connection 对 象 操作 数据 库 
.能 使 用 Command 对 象 操作 数据 库 
.能 使 用 Recordset 对 象 操 作 数据 库 
知识 目标 

。、 Select ,Insert Delete 和 Update 语句 
。 Connection 对 象 

. Command 对 象 

。 Recordset 对 象 


an mo 


请 oo 性 


知识 储备 


知识 1 ADO 对 象 模型 


ADO 模型 定义 了 三 个 一 般 对 象 , 即 Connection 对 象 .Command 对 象 和 Recordset 对 


象 ,如 图 9-1 所 示 。 通 过 这 三 个 对 象 ,可 以 方便 地 
建立 数据 库 的 连接 ,执行 SQL 查询 和 操纵 语句 。 
另外 还 有 Parameter 对 象 、Error 对 象 和 
Field 三 个 辅助 对 象 。 下 面 对 这 6 个 对 象 做 简单 
介绍 。 
Connection (连接 ) 对 象 : 代表 与 一 个 数据 源 
的 对 话 。 例 如 ,可 以 用 连接 对 象 打开 一 个 对 


Microsoft Access 数据 库 的 连接 。 
Recordset( 记 录 集 ) 对 象 : 代表 来 自 一 个 数 
据 提供 者 的 一 组 记录 。 例 如 ,可 以 用 一 个 记录 集 


Connection 
Errors Error 
上 Command 
Parameters 了 Parameter | 
Recordset 
| Fiads Field 


图 9-1 ADO 对 象 结构 示意 图 
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翁 


对 象 读 取 一 个 Access 数据 表 中 的 记录 。 
Command( 命 令 ) 对 象 : 代表 一 个 命令 。 例 如 ,可 以 用 命令 对 象 执行 一 个 SQL 语句 或 者 
数据 库存 储 过 程 。 
Parameter( 参 数 ) 对 象 : 代表 SQL 存储 过 程 或 有 参数 查询 中 的 一 个 参数 。 
Field( 域 ) 对 象 : 代表 一 个 记录 集中 的 一 个 域 。 
Error( 错 误 ) 对 象 : 代表 ADO 错误 。 


知识 2 用 ODBCc 连 接 数据 库 


ODBC(Open Database Connectivity, 开 放 数 据 库 连 接 ) 是 微软 开放 的 服务 器 结构 中 有 
关 数 据 库 的 一 个 组 成 部 分 , 它 规定 “以 统一 的 API 存 取 异 构 数据 库 信息 ”, 得 到 了 世界 上 领 
先 的 数据 库 和 应 用 程序 开发 商 的 广泛 支持 。 采 用 ODBC 技术 ,应 用 程序 只 需 关 心 数 据 的 处 
理 而 不 必 考 虑 数据 的 存 取 , 编 程 人 员 不 必 了 解 具体 的 DBMS, 从 而 可 极 大 地 减少 软件 开发 人 
员 的 工作 量 , 缩 短 开发 周期 ,提高 效率 和 软件 的 可 靠 性 。 

1. 创建 系统 DSN 

下 面 以 Access 数据 库 为 例 , 详 细 讲 述 如 何 建 立 一 个 DSN 并 在 ASP 文 件 中 连接 这 个 数 
据 库 。 在 计算 机 的 “控制 面板 ”的 “管理 工具 ”中 找到 管理 ODBC 数据 源 的 应 用 程序 启动 图 
标 , 如 图 9-2 所 示 。 


文件 到 ) 编辑 时) 查看 如 收藏 和) 工具 CD) 天助 00 

名 恨 - 日 他 只 搜索 昌文 天 回 - 

地 址 m) | 哆 管理 工具 v 轩 #9 
文件 和 文件 夫 任 务 ¥ + 和 9 


ee desktop. ini 要 本 人 


sextxmaw | 入 局 罗 于 


自 典 电 子 邮 伞 形 式 发 送 此 广 服务 on 计算 机 管理 了 内 有 玉生 wr 群集 管理 器 
阁员 用 分 污 
授权 型 到 有 网 络 监 视 器 性 能 
涉 党 轴 
里 务 配 


图 9-2 选择 “管理 工具 ”中 的 “数据 源 (ODBC)” 


双击 “数据 源 (ODBC)” 打 开 “ODBC 数据 源 管理 器 ”, 如 图 9-3 所 示 。 单 击 “ 系 统 DSN” 
标签 ,打开 系统 数据 源 界 面 , 单 击 右 侧 的 “添加 ”按钮 ,打开 “创建 新 数据 源 ” 对 话 框 ,如 图 9-4 
所 示 , 可 以 看 到 驱动 程序 列表 ,这 里 的 驱动 程序 表示 在 计算 机 上 已 经 安装 的 ODBC 驱动 程 
序 。 在 驱动 程序 列表 中 选择 Microsoft Access Driver( x .mdb), 单 击 “ 完 成 ”按钮 。 弹 出 如 
图 9-5 所 示 的 对 话 框 。 
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0DBC 数 舌 源 管 理 器 
用 户 DSW | 系统 DSN | 文件 DSH| 驱动 程序 | 跟踪 ”| 连接 池 | 关于 
用 户 数 据 源 QD ; 


Microsoft dBase Driver G@ dbf) 
Excel Files crosoft Excel Driver (#.xls) 
NS Access Database crosoft Access Driver (#.mdb 
Wisual FoxPro Database Microsoft Visual FoxPro Driver 
Visusl FoxPro Tables Microsoft Visusl FoxPro Driver 


< > 


a 


Ce |] mw | sa% | Ww | 


图 9-3 打开 ODBC 数据 源 管理 器 


创建 新 数 磊 天 


选择 您 起 为 其 安装 数据 源 的 驱动 程序 E)。 
名 称 ~ 


Driver da Microsoft para arquivos texto (# 
Driver do Microsoft Access (#,mdb) 

Driver do Microsoft dBase (*, dbf) 

Driver do Microsoft Excel 人 .xls) 

Driver do Microsoft Paradox (#.db ) 
Driver para o Microsoft Visual FoxPro 


Microsoft Access-Treiber (*.mdb) 
Microsoft dBase Driver 人 dbf) 
Microsoft dBase VFP Driver (#. dbf) 


< 


图 9-4 选择 数据 源 的 驱动 程序 


0DBC Nicrosoft Access 安装 
数据 源 名 QJTestDSN 


说 明 四 ): [Access 测 斌 数据 源 
数据 库 


数据 库 :_E:\website_asp\chapter09\db\Goods. mdb 


了 提 建 口 .. | 修复 包 .. | 压缩 如 .| 


系统 数据 库 


“无 
厂 数据 库 吕 ): 


SO | 


图 9-5 指定 数据 库 文件 
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写 


在 对 话 框 的 “数据 源 名 ”文本 框 中 输入 数据 源 的 名 称 TestDSN, “说明” 域 用 来 对 数据 源 
进行 说 明 , 单 击 “ 数 据 库 ” 区 域 的 "选择 "按钮 选择 要 访问 的 Access 数据 库 。 单 击 “ 确 定 " 按 钮 
即 可 在 “系统 DSN” 中 创建 一 个 名 为 TestDSN 的 系统 DSN。 

2. 系统 DSN 的 连接 测试 

下 面 利用 已 经 建立 的 TestDSN 数据 源 来 实现 在 ASP 文件 中 对 数据 库 的 连接 。 详 细 步 
又 如 下 。 

(1) 创建 一 个 名 为 RW9-1. asp 的 网 页 文件 。 切 换 到 代码 视图 ,在 一 body 之 二 /body 盖 
标签 中 输入 如 下 代码 。 


< 
Set Conn = Server. CreateObject( "ADODB. Connection") 
Conn. Open "DSN = TestDSN" 
if Conn. State = 1 then 
Response.Write(" 数 据 库 打开 成 功 <chr>") 
end if 
Conn. Close 
if Conn. State = 0 then 
Response. Write(" 数 据 库 已 经 关闭 <br>") 
end if 
Set Conn = nothing 
先 > 


(2) 在 浏览 器 中 预览 ,程序 运行 结果 如 图 9-6 所 示 。 


习 利用 0DBC 连 接 Access 数 括 库 - indows Internet Erplorer 
文件 下 ”编辑 于) 查看 QW) 收 诚 和 ) 工具 CD) 帮助 Q0) [9 


OF 则 -四 国 的 也 失去 收 g 天 伯 所 -总 加- 半 国 
地 全 加) 和 http://1ocdhost/website_asp/chapter09/R19-1.asp ” 国 轩 到 SEE ”> 


数据 库 打开 成 功 
数据 库 已 经 关闭 


饮 本 地 Intranet 


图 9-6 系统 DSN 的 连接 测试 结果 


在 以 上 代码 中 ,首先 建立 ADO 中 的 Connection 对 象 ,然后 用 Connection 对 象 的 Open 
函数 打开 ODBC 数据 源 TestDSN。Connection 的 State 属性 可 以 表示 数据 库 连 接 是 否 打开 
成 功 ,1 表示 打开 成 功 ,0 表示 打开 失败 。 


知识 3 创建 文件 DSN 


可 以 建立 文件 DSN 将 数据 库 的 配置 信息 保存 在 一 个 后 缀 为. dsn 的 文件 中 ,ODBC 数 
据 源 通过 读 取 . dsn 文件 中 的 配置 来 建立 和 数据 库 的 连接 。 文 件 DSN 的 优点 是 可 以 通过 在 
不 同 的 服务 器 之 间 复 制 . dsn 文件 实现 ODBC 数据 源 的 快速 配置 。 建 立 文件 DSN 的 基本 过 
程 与 建立 系统 DSN 的 过 程 一 致 ,只 是 系统 DSN 仅仅 需要 为 DSN 取 一 个 名 称 ,而 文件 DSN 
需要 建立 一 个 文件 并 把 它 保存 在 相应 的 目录 中 。 文件 DSN 默认 存放 在 \Program Files\ 


名 09 模 块 ” 网 页 数据 库 扩展 
Common Files\ODBC\Data Sources 目录 中 。 创 建文 件 DSN 的 步骤 如 下 。 
(1) 双击 控制 “面板 管理 "工具 中 的 “数据 源 (ODBC)”, 打 开 “ODBC 数据 源 管理 器 ”, 在 
弹出 的 "ODBC 数据 源 管 理 器 "对 话 框 中 选择 "文件 DSN” 选 项 卡 ,如 图 9-7 所 示 。 
和 10DBC 数 磊 源 管 理 器 
用 户 DSN | 系统 ISN 8 区 件 现下 红 动 程序 | 跟踪 | 连接 池 | 关于 | 


添加 中) 


鲜 村 文件 DSN 可 以 由 


mW | A | | 
图 9-7 “ODBC 数据 源 管理 器 "中 的 “文件 DSN” 选 项 卡 


(2) 单 击 “添加 ”按钮 ,在 弹出 的 对 话 框 中 选择 Microsoft Access Driver( x* .mdb) 数 据 
源 驱 动 程序 ,然后 单 击 * 下 一 步 " 按 钮 ,弹出 如 图 9-8 所 示 的 对 话 框 。 


se 
Eeets Sources\nyfiledsn dd 训 览 @ 


《上 二- 步 @ 取消 


图 9-8 ”指定 “文件 DSN” 的 保存 位 置 


其 他 过 程 与 建立 系统 DSN 基本 相似 :在 此 不 再 费 述 。 在 ASP 中 连接 文件 DSN 的 方法 
和 连接 系统 DSN 几乎 一 致 。 先 建立 Connection 对 象 ,然后 调用 Connection 对 象 的 Open 
方法 建立 对 数据 源 的 连接 ,但 Open 函数 的 参数 应 该 改 为 FILEDSN ,比如 将 RW9-1. asp 文 
件 改 为 连接 文件 DSN“myfiledsn. dsn”, 只 需要 将 Open 函数 改 为 如 下 形式 即 可 。 

Conn. Open "FILEDSN = myfiledsn. dsn" 


修改 后 的 程序 运行 结果 如 图 9-6 所 示 。 
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注意 : 用 户 DSN 会 把 相应 的 配置 信息 保存 在 Windows 的 注册 表 中 ,但 是 只 允许 创建 
该 DSN 的 登录 用 户 使 用 ; 系统 DSN 同样 将 有 关 的 配置 信息 保存 在 系统 注册 表 中 ,但 是 它 
允许 所 有 登录 服务 器 的 用 户 使 用 ; 文件 DSN 把 具体 的 配置 信息 保存 在 硬盘 上 的 某 个 具体 
文件 中 。 文 件 DSN 允许 所 有 登录 服务 器 的 用 户 使 用 ,而 且 即 使 在 没有 任何 用 户 登 录 的 情况 
下 ,也 可 以 提供 对 数据 库 DSN 的 访问 支持 ,建议 用 户 选择 系统 DSN 或 文件 DSN。 


知识 4 创建 无 DSN 的 连接 


除了 可 以 使 用 ODBC 数据 源 DSN 连接 数据 库 外 ,还 可 以 创建 无 DSN 的 连接 和 基于 
OLE DB 的 连接 。 
创建 无 DSN 的 连接 还 是 基于 ODBC 的 连接 ,只 不 过 需要 用 户 提 前 设置 数据 源 ,对 于 
Access 数据 库 , 一 般 需 要 用 到 Driver 和 DBQ 两 个 参数 。 连 接 方 法 如 下 : 
< 和 
Set Conn = Server. CreateObject ("ADODB. Connection") 
url = "Driver = {Microsoft Access Driver ( * .mdb)};DBO=" 
&Server.MapPath("db/Goods.mdb") 
Conn. Open url 
多 > 
代码 中 的 Driver 表示 ODBC 连接 的 驱动 程序 ,DBQ 表示 数据 库存 放 路 径 。 
当然 也 可 以 使 用 ADO 通过 OLE DB 的 数据 库 驱 动 程序 直接 访问 数据 库 。 一 般 OLE 
DB 的 数据 库 连 接 需 要 用 到 Provider 和 Data Source 两 个 参数 。 连 接 方 法 如 下 : 
< 
Set Conn = Server. CreateObject ("ADODB. Connection") 
url = "Provider = Microsoft. Jet. OLEDB. 4. 0;Data Source=" 
& Server. MapPath( "db/Goods. mdb") 


Conn. Open( ur1) 
%> 


其 中 ,Provider 表示 Access 数据 库 服务 的 提供 者 ; Data Source 表示 数据 库 的 来 源 。 
知识 5 ASP 连接 SQL Server 和 MySQL 数据 库 


SQL Server 和 MySQL 数据 库 的 DSN 连接 方式 与 Access 基本 相似 ,在 此 不 做 介绍 。 
这 里 主要 介绍 无 DSN 方式 和 基于 OLE DB 方式 。 
1. ASP 连接 SQL Server 数据 库 
(1) 无 DSN 连接 方式 
通过 如 下 代码 即 可 实现 对 SQL Server 数据 库 的 无 DSN 连接 。 
< 多 
Set Conn = Server. CreateObject( "ADODB. Connection") 
url = "Driver = {SQL Server} ; Server = serverName;UID = sa;PWD = 1234;Database = dbName" 


Conn. Open url 
> 


上 面 代码 中 的 Driver 参数 表示 ODBC 连接 的 驱动 程序 ,该 驱动 程序 名 字 能 够 在 如 图 9-4 
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所 示 的 对 话 框 中 找到 ,基于 SQL Server 数据 库 的 ODBC 连接 驱动 程序 名 为 "SQL Server”; 
Server 参数 表示 SQL Server 服务 器 名 ,使 用 时 输入 用 户 安装 SQL Server 时 设 定 的 服务 器 
名 字 ; UID 和 了 PWD 参数 表示 连接 数据 库 的 用 户 名 和 密码 ; Database 参数 表示 连接 的 数据 
库 名 。 

(2) OLE DB 连接 方式 

通过 如 下 代码 即 可 实现 对 SQL Server 数据 库 的 OLE DB 连接 。 

Set Conn = Server. CreateObject ("ADODB. Connection") 

url = "Provider = SqlO0LEDB;DataSource = serverName;UID= sa;PWD = 1234; 


Database = dbName " 
Conn. Open url 


上 面 代码 中 的 Provider 参数 表示 SQL Server 数据 库 服 务 的 提供 者 ; DataSource 参数 
表示 数据 的 来 源 , 使 用 时 输入 用 户 安装 SQL Server 时 设 定 的 服务 器 名 字 ; UID 和 PWD 参 
数 表 示 连 接 数据 库 的 用 户 名 和 密码 ; Database 参数 表示 连接 的 数据 库 名 。 
2. ASP 连接 MySQL 数据 库 
关于 ASP 连接 MySQL 数据 库 ,本 书 只 介绍 无 DSN 连接 方式 , Windows 2003 系统 本 
身 没 有 安装 支持 MySQL 数据 库 的 ODBC 驱动 ,需要 到 相关 网 站 下 载 该 驱动 。 本 书 使 用 下 
载 的 驱动 “mysql-connector-odbc-3. 51. 12-win32. msi”, 安 装 该 驱动 后 即 可 在 如 图 9-4 所 示 
对 话 框 中 找到 MySQL 的 ODBC 驱动 程序 ,其 名 字 为 “MySQL ODBC 3. 51 Driver”。 通 过 
如 下 代码 即 可 实现 对 MySQL 数据 库 的 无 DSN 连接 。 
< 和 
Set Conn = Server. CreateObject( "ADODB. Connection" ) 
url= "Driver = {MySQL ODBC 3.51 Driver}; 
Server = serverName;UID= username;PWD= password; Database = dbName" 
Conn. Open url 
第 > 
上 面 代 码 中 的 Driver 参数 表示 ODBC 连接 的 驱动 程序 ; Server 参数 表示 MySQL 服务 
器 名 ,使 用 时 输入 用 户 安装 MySQL 时 设 定 的 服务 器 名 字 , 例 如 localhost; UID 和 PWD 参 
数 表示 连接 数据 库 的 用 户 名 和 密码 ; Database 参数 表示 连接 的 数据 库 名 。 
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在 ADO 的 模型 中 ,Connection 对 象 是 最 基本 的 对 象 ,代表 打开 的 与 数据 源 的 连接 ,就 
像 在 应 用 程序 和 数据 库 中 建立 了 一 条 传输 连 线 ,该 对 象 代表 与 数据 库 进行 的 唯一 连接 会 话 。 
在 确保 Connection 对 象 已 建立 与 数据 库 连 接 的 基础 上 ,可 以 使 用 Command 对 象 及 
Recordset 对 象 来 对 Connection 对 象 所 连接 的 数据 库 进 行 插入 .删除 .更 新 和 查询 等 操作 。 

Connection 对 象 有 很 多 属性 ,其 中 常见 的 属性 如 表 9-1 所 示 。 

下 面 的 代码 也 可 以 实现 连接 Access 数据 库 , 代 码 用 到 了 ConnectionString 属性 ,并 设 
定 Open 方法 和 数据 库 的 连接 时 间 为 30s ,数据 库 打开 使 用 读 / 写 权 限 。 


<% 
Set Conn = Server. CreateObject( "ADODB. Connection") 
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url = "Driver = {Microsoft Access Driver ( * .mdb)};DBO=" 
&Server. MapPath("db/Goods. mdb") 
Conn. ConnectionString = Url 
Conn. ConnectionTimeout = 30 
Conn.Mode= 3 
Conn. Open 
先 > 


表 9-1 Connection 对 象 的 常用 属性 


属 性 名 说 明 
ConnectionString 。 设置 或 返回 用 于 建立 连接 数据 源 的 细节 信息 
ConnectionTimeout 指示 在 终止 尝试 和 产生 错误 前 建立 连接 期 间 需 等 待 的 时 间 
CommandTimeout ”指示 在 终止 尝试 和 产生 错误 之 前 执行 命令 期 间 需 等 待 的 时 间 
DefaultDatabase 指示 Connection 对 象 的 默认 数据 库 


Provider 设置 或 返回 Connection 对 象 提供 者 的 名 称 。 默 认 是 MSDASQL (Microsoft OLE 
DB provider for ODBC) 

Mode 设置 或 返回 provider 的 访问 权限 。0: 不 设 定 (默认 ); 1: 只 读 ; 2: 只 写 ; 3: 读 / 写 

State 返回 一 个 描述 连接 状态 值 。0: 关闭 ; 1: 打开 


知识 7 Connection 对 象 的 主要 方法 
Connection 对 象 的 常用 方法 有 很 多 ,其 中 常用 的 方法 如 表 9-2 所 示 。 
表 9-2 ”Connection 对 象 的 常用 方法 


方 法 名 说 明 
Open 打开 一 个 连接 
Execute 执行 查询 .SQL 语句、 存储 过 程 或 Provider 具体 文本 
Close 关闭 一 个 连接 。 并 释放 与 连接 有 关 的 系统 资源 
Cancel 取消 一 次 执行 
BeginTrans 开始 一 个 新 事务 
CommitTrans 保存 任何 更 改 并 结束 当前 事务 
Rollback Trans 取消 当前 事务 中 所 做 的 任何 更 改 并 结束 事务 


Open 方 法 用 来 打开 一 个 Connection 的 对 象 实例 。 常 用 的 写法 为 conn. open 
ConnectionString ,如果 在 打开 之 前 已 经 定义 了 ConnectionString 属性 ,就 可 以 直接 打开 。 

Execute 方法 产生 一 个 Recordset 实例 。 常 用 的 写法 为 rs 王 conn. Execute CommandText， 
RecordsAffected,Option, 其 中 的 CommandText 可 以 是 以 下 的 三 种 形式 , 它 主要 由 Option 
的 值 来 决定 。 

(1) SQL 语句 ,此 时 Option 的 值 为 adCmdText, 表 示 将 执行 一 段 SQL 语句 。 

(2) 数据 库 的 一 个 表 名 ,此 时 Option 的 值 为 adCmdTable, 表 示 将 对 该 表 进 行 操作 。 

(3) 一 个 StoredProcedure 名 字 .此 时 Option 的 取 值 为 adCmdStoredProc, 它 表示 将 要 
执行 一 个 SQL 上 定义 的 存储 过 程 。 这 是 一 种 非常 灵活 而 强大 的 方法 , 它 可 以 对 用 户 隐藏 
数据 库 的 具体 信息 .而 只 需 用 户 提供 适当 的 参数 就 可 以 了 ,还 能 返回 需要 的 参数 值 。 如 果 没 
有 指定 CommandText, 则 Option 为 adCmdUnknown。 


09 模 块 ” 网 页 数据 库 扩展 197 


< 


下 面 要 求 利 用 Connection 对 象 实现 对 Access 数据 库 的 访问 ,建立 一 个 Access 数据 库 
Goods. mdb, 并 在 数据 库 中 创建 Goods 表 , 表 中 共 添 加 了 GoodID、GoodName、 Category、 
UnitPrice\Quantity 和 Description 6 个 字段 ,分 别 表示 商品 的 编号 .名 称 、 所 属 类 别 、 单 价 、 
数量 和 描述 等 。 

利用 Connection 对 象 可 实现 对 Access 数据 库 的 访问 ,详细 步骤 如 下 。 

(1) 创建 RW9-2.asp 网 页 ,在 网 页 中 输入 如 下 代码 。 


< html > 
<head> 
<title > 利用 Connection 对 象 访问 数据 库 </title> 

</head> 

<body> 

< 和 

Set Conn = Server. CreateObject ("ADODB. Connection") 

url = "Provider = Microsoft. Jet. OLEDB. 4. 0;Data Source=" 

& Server. MapPath( "db/Goods. mdb" ) 

Conn. ConnectionString = url 

Conn. Open 

"插入 数据 

strSQL = "insert into Goods values('00007', 'Sandisk 0 盘 ', ' 数 码 ',80,10, ' 容 量 4GB, 读 取 速 度 10MB/s, 写 

入 速度 3MB/s')" 

Conn. Execute strSQL, num 

Response. Write(" 添 加 了 "gnumg" 条 记录 <p>") 

"修改 数据 

strSQL = "update Goods set Price = Price+1" 

Conn. Execute strSQL, num 

Response. Write( "修改 了 "gnumg" 条 记录 <p>") 

' 查 询 数据 

strSQL= "Select * from Goods" 

Set rs = Conn. Execute( strSQL) 

Do 
Response. Write(rs("GoodName" )&"<br >") 
Response. Write(rs( "Category" )&"<br >") 
Response. Write(rs("Price")g" 元 <br>") 
Response. Write(rs("Quantity")&"<br >") 
Response. Write(rs( "Description")&"< br >") 
rs. MoveNext 

Loop Until rs. EOF 

"删除 数据 

strSQL = "delete from Goods where GoodID = '00007'" 

Conn. Execute strSQL, num 

Response. Write(" 删 除了 "Snumg" 条 记录 <p>") 

Conn. Close 

Set Conn = nothing 

先 > 

</body> 

</htm]l > 
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(2) 运行 本 ASP 程序 ,结果 如 图 9-9 所 示 。 


至 利用 Connection 对 象 访 问 狼 据 库 -Windows Internet Ezplorer 
文件 EE) 编辑 EE) 查看 WW) 收藏 和 工具 CI) 帮助 0 


人 OO 上 上 日 四 国 的 记 扫 雪 去 收 VW 天 外 和合- 龟 团 " 旨 国 
地 址 四 莘 http://1ocalhost/website_asp/chapter09/K19-2. ssp Y 园 轩 到 管 ” 殉 竺 执 - 国 达 择 


添加 了 1 条 记录 
修改 了 1 条 记录 
商品 名 ，Sandisk ! 哈 
类 别 , 数码 

价格 ，81 元 


库存 ，10 
描述 ， 容 量 46B, 读 取 速 度 10MB/s , 写 入 速度 31B/s 
删除 了 1 条 记录 


图 9-9 利用 Connection 对 象 操作 数据 库 


利用 Connection 对 象 实现 对 Access 数据 库 的 访问 ,可 以 实现 对 数据 库 的 增加 、 删 除 、 
修改 和 查询 等 基本 操作 。 如 果 再 结合 表单 即 可 制作 出 具有 增 、 删 , 修 和 查 功 能 的 简单 Web 
应 用 程序 。 


知识 8 Command 对 象 的 主要 属性 


使 用 Command 对 象 , 可 以 执行 带 参 数 的 存储 过 程 .SQL 查询 或 SQL 语句 ,还 可 以 接收 
Recordset 对 象 。Command 对 象 依赖 Connection 对 象 ,因为 Command 对 象 必 须 经 过 一 个 
已 经 建立 的 Connection 对 象 才能 发 出 SQL 命令 。 

Command 对 象 的 属性 比较 多 ,常见 的 属性 如 表 9-3 所 示 。 


表 9-3 Command 对 象 的 常见 属性 


属 性 名 说 明 
ActiveConnection 设置 或 返回 包含 定义 连接 或 Connection 对 象 的 字符 串 。 该 属性 可 读 / 写 
CommandType 设置 或 返回 一 个 Command 对 象 的 类 型 ,可 取 值 如 下 。 


adCmdText 或 1: 表示 运行 的 是 一 个 SQL 语句 。 
adCmdTable 或 2: 表示 运行 的 是 一 个 表 。 
adCmdStoredProc 或 4: 表示 运行 的 是 一 个 存储 过 程 。 
adCmdUnknown 或 8: 表示 不 能 识别 ,此 为 默认 值 


CommandText 设置 或 返回 包含 提供 者 (Provider) 命 令 ( 如 SQL 语句 、 表 格 名 称 或 存储 的 过 程 
调用 ) 的 字符 串 值 。 默 认 值 为 ""( 零 长 度 字 符 串 ) 

CommandTimeout 设置 或 返回 长 整 型 值 ,该 值 指 示 等 待命 令 执行 的 时 间 ( 单 位 为 s)。 默 认 值 
为 30 

State 返回 一 个 值 , 此 值 可 描述 该 Command 对 象 处 于 打开 、 关 闭 、 连 接 、 执 行 还 是 取 
回 数据 的 状态 


下 面 的 代码 创建 了 一 个 Command 对 象 Cmd, 设 置 其 ActiveConnection 为 前 面 代码 创 
建 的 Connection 对 象 Conn。 并 设置 其 CommandText 属性 值 为 一 个 SQL 语句 ,CommandType 
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属性 值 为 1。 通 过 运行 该 Cmd 对 象 的 Execute 方法 ,将 受 影 响 的 记录 数 返回 到 num 变量 
中 ,最 后 利用 Response. Write 语句 输出 了 num 变量 的 值 。 


< 和 


Set Cmd = Server. Create0bject("RDODB. Command" ) 

Cmd. ActiveConnection = Conn 

"插入 记录 

strSQL = "insert into Goods values('00001', ' 金 士 顿 0 盘 ', ' 数 码 ', 80, 10, ' 容 量 4GB, 读 取 速 度 
10MB/s, 写 人 速度 3MB/s')" 

Cmd. CommandText = strSQL 

Cmd.CommandType = 1 

Cnmd. Execute num 

Response. Write(" 添 加 了 "&numg" 条 记录 <p>") 
先 > 


知识 9 Command 对 象 的 主要 方法 


Command 对 象 的 主要 方法 如 表 9-4 所 示 。 
表 9-4 Command 对 象 的 常用 方法 


方 法 名 说 有明 
下 xecute 执行 CommandText 属性 中 的 查询 .SQL 语句 或 存储 过 程 
Cancel 取消 一 个 方法 的 一 次 执行 
CreateParameter 创建 一 个 新 的 Parameter 对 象 


Command 对 象 最 常用 的 方法 是 Execute 方法 ,该 方法 可 执行 CommandText 属性 中 指 
定 的 查询 .SQL 语句 或 存储 过 程 。 该 方法 有 两 种 语法 格式 : 一 种 是 有 返回 的 命令 ; 另 一 种 
是 无 返回 的 命令 。 

有 返回 的 命令 : 

Set rs = Command 对 象 . Execute(ra, parameters,options) 

无 返回 的 命令 : 

Command 对 象 . Execute( ra, parameters, options) 

其 中 ,参数 ra 表示 程序 返回 的 命令 操作 所 影响 的 记录 数 , 如 插入 、 修 改 或 删除 的 记录 
数 ; 参数 parameters 表示 使 用 SQL 语句 传递 的 参数 值 ; 参数 options 表示 提供 程序 如 何 计 
算 Command 对 象 的 CommandText 属性 。 

利用 Command 对 象 实现 对 Access 数据 库 的 访问 ,详细 步 又 如 下 。 

(1) 创建 RW9-3. asp 网 页 ,在 网 页 中 输入 如 下 代码 。 

<html> 

<head> 

<title> 利 用 Command 对 象 访问 Access 数据 库 </title> 


</head> 
<body> 
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这 


Set Conn = Server. CreateObject ("ADODB. Connection") 
url = "Provider = Microsoft. Jet. OLEDB. 4. 0;Data Source =" 
& Server. MapPath( "db/Goods. mdb" ) 
Conn. Open(url) 
Set Cmd = Server. CreateObject ("ADODB. Command" ) 
Cmd. ActiveConnection = Conn 
"插入 记录 
strSQL = "insert into Goods values('00001', ' 金 士 顿 0 盘 ', ' 数 码 ', 80, 10, ' 容 量 4GB, 读 取 速 度 
10MB/s, 写 人 速度 3MB/s')" 
Cmd. CommandText = strSQL 
Cmd.CommandType = 1 
Cmd. Execute num 
Response. Write(" 添 加 了 "gnumg" 条 记录 <p>") 
"修改 记录 
strSQL = "update Goods set Price = Price+1" 
Cnd. CommandText = strSQL 
Cnd.CommandType = 1 
Cmd. Execute num 
Response. Write(" 修 改 了 "gnumg" 条 记录 <p>") 
' 查 询 记录 
strSQL = "select #* from Goods" 
Cnd. CommandText = strSQL 
Cmd. CommandType = 1 
Set rs= Cmd. Execute 
Do While Not rs. EOF 
Response. Write(" 商 品名: "&rs("GoodName" )&"<br>") 
Response. Write( "类别 : "grs("Category")g"<br>") 
Response. Write( "价格 : "&rs("Price")&g" 元 <br >") 
Response. Write( "库存 : "&rs("Quantity")&"<br>") 
Response. Write( "描述 : "&rs("Description")&"< br>") 
rs. MoveNext 
Loop 
"删除 记录 
strSQL = "delete from Goods where GoodID = '00001'" 
Cmd. CommandText = strSQL 
Cmd. CommandType = 1 
Cnd. Execute num 
Response. Write(" 删 除了 "Snumg" 条 记录 <p>") 
Conn. Close 
Set Conn = nothing 
%> 
</body> 
</html > 


(2) 运行 本 Web 程序 ,结果 如 图 9-9 所 示 。 
由 以 上 程序 可 见 , Connection 对 象 实现 对 Access 数据 库 的 访问 操作 也 可 以 由 
Command 对 象 来 完成 ,但 Command 对 象 必须 依赖 Connection 对 象 。 


知识 10 ”Recordset 对 象 的 创建 
Recordset 对 象 表示 的 是 来 自 基 本 表 或 命令 执行 结果 的 记录 全 集 。 可 使 用 Recordset 


< 


对 象 操作 来 自 提供 者 的 数据 。 使 用 ADO 时 ,通过 Recordset 对 象 可 对 几乎 所 有 数据 进行 
操作 ,所 有 Recordset 对 象 均 使 用 记录 ( 行 ) 和 字段 ( 列 ) 进 行 构造 。Recordset 对 象 实际 上 是 
依附 于 Connection 对 象 和 Command 对 象 之 上 的 。Recordset 对 象 数据 集 的 获取 必须 先 通 
过 Connection 对 象 建立 与 数据 库 的 连接 ,同时 对 Recordset 数据 集 的 操作 也 依赖 于 
Command 对 象 。 

虽然 也 可 以 使 用 Connection 对 象 和 Command 对 象 的 Execute 方法 返回 Recordset 对 
象 , 但 标准 的 Recordset 对 象 的 建立 语句 如 下 。 


Set Recordset 对 象 = Server. CreateObject( "ADODB. Recordset") 
然后 需要 调用 Recordset 对 象 的 Open 方法 打开 一 个 数据 库 。 语 句 如 下 。 
Recordset 对 象 . Open Source, ActiveConnection, CursorType, LockType, Options 


各 参数 说 明 如 下 。 

Source: 代表 命令 类 型 ,可 以 是 一 个 Command 对 象 名 称 .一 个 SQL 命令 一 个 指定 的 
数据 表 名 称 或 一 个 存储 过 程 。 

ActiveConnection: 代表 一 个 Connection 对 象 或 一 串 包 含 数 据 库 连接 信息 的 字符 串 
参数 。 
CursorType: 表示 将 以 什么 样 的 游标 类 型 启动 数据 ,可 取 值 为 0,1,2,3。 
LockType: 表示 要 采用 的 Lock 类 型 ,可取 值 为 1.2,3 .4。 

Options: 表示 对 数据 库 请 求 的 类 型 ,可 取 值 为 1.2,4。 
创建 Recordset 对 象 的 三 种 方法 如 下 。 
(1) 用 Connection 对 象 创 建 Recordset 对 象 代 码 如 下 。 


Set Conn = Server. CreateObject("ADODB. Connection") 

url = "Driver = {Microsoft Access Driver (* .mdb)};DBQ=" 
&Server. MapPath( "db/Goods. mdb") 

Conn. ConnectionString = url 

Conn. Open 

Set rs = Conn. Execute( "select x from Goods") 


(2) 用 Command 对 象 创建 Recordset 对 象 代 码 如 下 。 


Set Conn = Server. CreateObject ("ADODB. Connection") 

url = "Driver = {Microsoft Access Driver ( * .mdb)};DBQ=" 
&Server. MapPath( "db/Goods. mdb") 

Conn. ConnectionString = url 

Conn. Open 

Set Cmd = Server. CreateObject ("ADODB. Command") 

Cmd. ActiveConnection = Conn 

Cmd. CommandText = "select * from Goods" 

Set rs = Cmd. Execute 


(3) 用 Recordset 对 象 的 Open 方法 创建 Recordset 对 象 代码 如 下 。 


Set Conn = Server. CreateObject ("ADODB. Connection") 
url = "Driver = {Microsoft Access Driver (* .mdb)};DBQO=" 
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入 
&Server. MapPath("db/Goods. mdb") 

Conn. ConnectionString = url 

Conn. Open 

Set Cmd = Server. CreateObject ("ADODB. Command") 

Cmd. ActiveConnection = Conn 

Cmd. CommandText = "select * from Goods" 

Set rs = Server. CreateObject ("ADODB. Recordset") 

rs. Open Cmd, Conn 


知识 11 Recordset 对 象 的 属性 


Recordset 对 象 的 属性 比较 多 ,常用 属性 如 表 9-5 所 示 。 
表 9-5 ”Recordset 对 象 的 常用 属性 


属 性 名 说 明 

EOF 如 果 当 前 记录 的 位 置 在 最 后 的 记录 之 后 , 则 返回 true, 否 则 返回 false 

BOF 如 果 当 前 的 记录 位 置 在 第 一 条 记录 之 前 , 则 返回 true, 否 则 返回 false 

ActiveConnection 如 果 连 接 被 关闭 ,设置 或 返回 连接 的 定义 ,如 果 连 接 打 开 , 设 置 或 返回 当前 的 
Connection 对 象 

AbsolutePage 设置 或 返回 一 个 可 指定 Recordset 对 象 中 页 码 的 值 

AbsolutePosition 设置 或 返回 一 个 值 ,此 值 可 指定 Recordset 对 象 中 当前 记录 的 顺序 位 置 (序号 
位 置 ) 

PageCount 返回 一 个 Recordset 对 象 中 的 数据 页 数 

PageSize 设置 或 返回 Recordset 对 象 的 一 个 单一 页 面 上 所 人 允许 的 最 大 记录 数 

Sort 设置 或 返回 一 个 或 多 个 作为 Recordset 排序 基准 的 字段 名 

CursorType 设置 或 返回 一 个 Recordset 对 象 的 游标 类 型 

LockType 设置 或 返回 当 编 辑 Recordset 中 的 一 条 记录 时 ,可 指定 锁定 类 型 的 值 


在 遍历 数据 集中 所 有 记录 时 ,通常 用 EOF 属性 判断 记录 指针 是 否 到 达 记 录 集 最 后 的 记 


录 之 后 ,如 以 下 代码 。 


Do While Not rs. EOF 
… 输 出 记录 
rs. MoveNext 

Loop 


知识 12 ”Recordset 对 象 的 方法 


Recordset 对 象 的 方法 也 比较 多 ,常用 方法 如 表 9-6 所 示 。 
表 9-6 Recordset 对 象 的 常用 方法 


方 法 名 说 有明 

Open 打开 一 个 数据 库 元 素 , 此 元 素 可 提供 对 表 的 记录 、 查 询 的 结果 或 保存 的 
Recordset 的 访问 

Update 保存 所 有 对 Recordset 对 象 中 的 一 条 单一 记录 所 做 的 更 改 


AddNew 创建 一 条 新 记录 
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续 表 
方 法 名 说 明 
Delete 删除 一 条 记录 或 一 组 记录 
Close 关闭 一 个 Recordset 
Move 在 Recordset 对 象 中 移动 记录 指针 
MoveFirst 把 记录 指针 移动 到 第 一 条 记录 
MoveLast 把 记录 指针 移动 到 最 后 一 条 记录 
MoveNext 把 记录 指针 移动 到 下 一 条 记录 
MovePrevious 把 记录 指针 移动 到 上 一 条 记录 
GetRows 把 多 条 记录 从 一 个 Recordset 对 象 中 拷贝 到 一 个 二 维 数组 中 
GetString 将 Recordset 作为 字符 串 返回 


在 实际 的 Web 编程 中 ,Recordset 对 象 的 Update、AddNew 和 Delete 等 方法 运用 比较 
多 。 例如 ,可 以 利用 Update 和 AddNevw 方法 实现 记录 的 插入 和 更 新 ,用 Delete 方法 实现 记 
录 的 删除 。 

利用 Recordset 对 象 也 可 以 实现 对 Access 数据 库 的 访问 ,详细 步骤 如 下 。 

(1) 创建 RW9-4-1. asp 网 页 ,在 网 页 中 输入 如 下 代码 。 


< html > 
<head > 
<title> 利 用 Recordset 对 象 访问 Access 数据 库 </title> 
</head> 
<body> 
<% 
Set Conn = Server. CreateObject ("ADODB. Connection") 
url = "Provider = Microsoft. Jet. OLEDB. 4. 0;Data Source =" 
& Server. MapPath( "db/Goods. mdb" ) 
Conn. Open(url) 
Set rs = Server. CreateObject ("ADODB. RecordSet") 
strSQL= "select * from Goods" 
rs. open strSQL, conn, 1,3 
"插入 记录 
rs.addnew 
rs("GoodID") = "00001" 
rs("GoodName") = "金士顿 U 盘 " 
rs("Category") = "数码 " 
rs("Price") = 80 
rs("Quantity")=10 
rs("Description") = "容量 46B, 读 取 速度 10MB/s, 写 入 速度 3MB/s" 
rs. update 
Response. Write(" 添 加 了 1 条 记录 <p>") 
"查询 记录 
Do While Not rs. EOF 
Response. Write(" 商 品名 : "&rs("GoodName")g"<br>") 
Response. Write(" 类 别 : "grs("Category")&"<br>") 
Response. Write(" 价 格 : "grs("Price")g" 元 <br>") 
Response. Write(" 库 存 : "&rs("Quantity")&"<br>") 
Response. Write(" 描 述 : "&rs("Description" )&"<br><br>") 
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rs. MoveNext 
Loop 
Conn. Close 
Set Conn = nothing 
多 > 
</body> 
</html > 


(2) 运行 RW9-4-1. asp 网 页 ,结果 如 图 9-10 所 示 。 
习 利用 Recoraset 对 象 访问 Access 数 据 库 - Windows Internet Erplorer 
文件 四 ”编辑 中 查看 WW 收藏 和 4) 工具 四 帮助 Q0 
PE- 回国 国 输 记 扫 坟 克 收 VW 天 如 所 -中 加 -8 回 
地 址 四 箭 http://1ocalhost/website_asp/chspter09/RI9-4-1. asp ”| 园 转 到 旋 招 ” 全 竺 执 、 国 迁 择 
添加 了 1 条 记录 
商品 名 : 金士顿 | 盘 


类 别 ， 数 码 
价格 ，80 元 


存 ，10 
容量 46B， 读 取 速 度 10IB/s， 写 入 速度 3B/s 


晤 林地 Intranet 


图 9-10 利用 Recordset 对 象 添加 数据 


(3) 创建 RW9-4-2. asp 网 页 ,在 网 页 中 输入 如 下 代码 。 


< html > 
< head > 
<title > 利用 Recordset 对 象 访问 Access 数据 库 </title> 
</head> 
<body> 
< 和 
Set Conn = Server. CreateObject ("ADODB. Connection") 
url = "Provider = Microsoft. Jet. OLEDB. 4. 0;Data Source =" 
& Server. MapPath( "db/Goods. mdb" ) 
Conn. Open(url) 
Set rs = Server. CreateObject ("ADODB. RecordSet") 
"修改 记录 
StrSQL = "select * from Goods where GoodID = '00001'" 
rs. open strSQL, conn, 1,3 
rs("Price" ) = rs("Price")+1 
rs. update 
Response. Write(" 修 改 了 1 条 记录 < p>") 
' 查 询 记录 
Do While Not rs. EOF 
Response. Write(" 商 品名 : "grs("GoodName")&g"< br>") 
Response. Write(" 类 别 : "&rs("Category")&"<br>") 
Response. Write(" 价 格 : "grs("Price")g" 元 <br>") 
Response. Write(" 库 存 : "&rs("Ouantity")&"<br>") 
Response. Write(" 描 述 : "&rs("Description" )&"<br><br>") 
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rs. MoveNext 
Loop 
"删除 记录 
TS.MoveFirst 
rs.delete 
Response. Write(" 删 除了 1 条 记录 <p>") 
Conn. Close 
Set Conn = nothing 
先 > 
</body> 
</html > 


(4) 运行 RW9-4-2. asp 网 页 ,结果 如 图 9-11 所 示 。 


下 利用 Recordset 对 得 访问 A 数据 库 - Windows Internet Explorer 

文件 四 篇 辑 开 ) 查看 上 ) 收 蹇 如 ) 工具 CI) 帮助 凶 ) 

加 FE- 日 -回国 钦 记 搜 坟 它 收 天 全 全 -总 团 - 旨 回 

地 址 四 策 Mttp://1ocalhost/website_ssp/chspter09/RI9-4-2. sp | 图 转 到 管 后 ” 二 和 转 执 - 国 选 择 
修改 了 1 条 记录 


商品 名 ， 金士顿 U 盘 
类 别 ， 数 
价格 ，81 


元 


库存 : 10 
描述 ， 容 量 46B， 读 职 速度 10UB/s， 写 入 速度 3IIB/s 
删除 了 1 条 记录 


图 9-11 利用 Recordset 对 象 修改 和 删除 数据 


比较 上 面 两 个 Web 程序 ,需要 注意 以 下 几 点 。 

(1) Recordset 对 象 在 向 数据 库 添加 记录 时 ,需要 先 利 用 AddNew 方法 新 建 一 条 记录 ， 
然后 给 记录 的 各 个 字段 赋值 .最 后 调用 Update 方法 即 可 实现 记录 的 添加 。 

(2) Recordset 对 象 修改 数据 库 记 录 时 则 不 需要 利用 AddNew 方法 。 

(3) Recordset 对 象 在 删除 记录 时 需要 移动 记录 指针 到 某 条 打算 删除 的 记录 ,然后 调用 
Delete 方法 就 可 以 删除 该 记录 。 


模拟 制作 任务 


任务 1 制作 一 个 分 页 中 浏览 的 ASP 网 页 


任务 背景 

当 网 页 一 页 的 内 容 显 示 比 较 多 时 需要 提供 分 页 功能 。 

任务 要 求 

(1) 应 该 提供 “首页 ”"“ 前 页 ”“ 后 页 ”和 “ 末 页 ”等 链接 供用 户 实现 翻 页 。 
(2) 应 该 提供 输入 框 让 用 户 直接 输入 页 码 跳 转 到 相应 页 。 

【技术 要 领 】Recordset 对 象 的 综合 使 用 。 
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写 


【解决 问题 】 分 页 浏览 。 
【应 用 领域 】 网 页 数据 分 页 显示 。 
效果 图 
分 页 浏览 运行 结果 如 图 9-12 所 示 。 

沁 商品 管理 - Windows Internet Ezplorer 

文件 编辑 于 ) 查看 WD 收藏 和 ) 工具) 帮助 中 

加 有 扫 - 日 国 国 的 内 和 言 收 天 全 启 - 马 四 -3 回 

地 址 四 | 税 http://1ocalhost/website_asp/chapter09/RN9-5. asp?psee=2 ”YY 国 革 到 往生 ” 克 畦 扫 ” 国 选择 
商品 管理 

库存 商品 信息 如 下 


簿 加 商品 


商品 编号 商品 名 称 商品 类 别 价格 库存 商品 拱 述 揉 作 
00003 ”|SonyU 盘 数码 81 10 ”容量 46 ”修改 | 删除 
00004 。 证 普 数码 65 “6 容量 为 区。 修改 | 者 除 


第 2 页 / 共 3 页 ”本 页 2 条 / 共 6 条 [首页 ] [前 页 ] [后 页 ] [未 页 ] EE 


图 9-12 ADO 分 页 显示 数据 效果 


任务 分 析 
这 一 任务 的 重点 是 Recordset 对 象 的 综合 使 用 ,使 用 Recordset 对 象 的 pagesize 属性 指 


定 每 页 显示 的 记录 数 , 使 用 Recordset 对 象 的 absolutepage 属性 指定 当前 显示 的 页 码 。 


重点 和 难点 

Recordset 对 象 的 有 关 分 页 属性 的 使 用 。 

操作 步骤 

创建 RW9-5. asp 网 页 ,在 网 页 中 输入 如 下 代码 。 


< html > 
<head > 

<title > 商品 管理 </title> 
</head> 
<body> 
商品 管理 
<hr> 
<table border = 0 cellpadding = "0"> 
<tr> 

< td> 库 存 商 品 信息 如 下 </td> 
</tr> 
<tr> 

<td align = "right"><a href = "GoodAddform. html"> 添 加 商品 </a></td> 
</tr> 
<tr><td> 
<table border =1 cellspacing=1> 

<tr> 
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<td> 商 品 编号 </td>< td> 商 品名 称 </td>< td> 商 品类 别 </td> 
<td> 价 格 </td>< td > 库存 </td>< td> 商 品 描 述 </td><td> 操 作 </td> 
</tr> 
< 
Set Conn = Server. CreateObject ("ADODB. Connection") 
url = "Provider = Microsoft. Jet. OLEDB. 4. 0;Data Source = "&Server. MapPath("db/Goods. mdb") 
Conn. Open(url) 
Set rs = Server. CreateObject ("ADODB. Recordset") 
rs. ActiveConnection = Conn 
rs. Open "select * from Goods order by GoodID" ,conn,1,1 
rs.pagesize=2 
if request("page") = "" then 
curpage = 1 
else 
curpage = cint(request("page")) 
end if 
if curpage * rs.pagesize > rs.RecordCount then 
if rs.RecordCount mod rs. pagesize = 0 then 
curpage = rs. RecordCount\rs. pagesize 
else 
curpage = (rs. RecordCount\rs. pagesize) +1 
end if 
end if 
rs.absolutepage = curpage 
fori = 1 to rs.pagesize 
%> 
<tr><td><% =rs("GoodID") %></td> 
<td><$ = rs("GoodName") %></td> 
<td><% =rs("Category") %$></td> 
<td><% =rs("Price")%></td><td> 
<% =rs("Quantity") %></td><td> 
<% =rs("Description") %></td> 


<td><a href = "GoodEditform.asp?GoodID=<$% = rs("GoodID" ) $>"> 修 改 </a>| 
<a href = "GoodDelete.asp?GoodID = <% = rs("GoodID")% >"> 删 除 </a></td> 
</tr> 
< 和 
rs. movenext 
if rs. eof then 
FE 
exit for 
end if 
next 
多 > 
</table> 
</td> 
</tr> 
</table> 


<form action = "RW9 — 5.asp" target ="_self"> 

<hr size=0 width= '100% > 

第 < font color = red><% = cstr(curpage) $></font > 页 / 共 

< font color = red><% = cstr(rs. pagecount) %></font > 页 &nbsp; &nbsp; 


207 


208 ”网 站 建设 与 管理 基础 及 实 训 (ASP 版 ) 全 
本 页 < font color = red><s% =cstr(i 一 1) 名 ></font > 条 / 共 
< font color = red><% = cstr(rs. recordcount) %></font > 条 
< 各 
if curpage = 1 then 
> 
< 
else 
先 > 
[<a href = "RW9 - 5.asp?page = 1"> 首 页 </a>] 
[<a href = "RW9 - 5.asp?page = <% =cstr(curpage -1)%>"> 前 页 </a>] 
< 
end if 
if curpage = rs.pagecount then 
多 > 
<% 
else 
多 > 
[<a href = "RW9 - 5.asp?page = <% = cstr(curpage+ 1) 名 >"> 后 页 </a>] 
[<a href = "RW9 - 5.asp?page =<% = cstr(rs.pagecount) $%>"> 未 页 </a>] 
< 和 
end if 
%> 
<label> 
< input name = "page" type= "text" id= "page" size= "4"> 
< input type = "submit" name = "Submit" value = " 跳 转 "> 
</label > 
<% 
set rs = nothing 
Set conn = nothing 
第 > 
</form> 
</body> 
</html > 


代码 说 明 : 

本 程序 可 以 通过 “首页 ”"“ 前 页 ”“ 后 页 "和 “ 末 页 ”4 个 超 链接 实现 翻 页 ; 也 可 以 在 文本 
框 中 输入 页 码 后 按 Enter 键 或 单 击 “ 跳 转 ” 按 钮 实现 跳 转 。 程 序 首先 通过 语句 rs. pagesize 一 
2 指定 每 页 显示 两 条 记录 。 然 后 通过 在 4 个 翻 页 超 链 接 href 属性 指定 的 ASP 网 页 后 附加 
参数 ,如 二 a href 二 "RW9-5. asp?page 一 二 昕 一 cstr(Ccurpage-1)% 二 "过 前 页 一 /a>。 程 序 
获取 地 址 栏 的 page 参数 值 保存 到 curpage 变量 中 ,最 后 通过 语句 rs. absolutepage 一 
curpage 指定 数据 集 当 前 显示 的 页 码 。 

需要 注意 的 是 ,在 设置 跳 转 输入 框 时 ,其 名 字 应 该 设置 为 "page”, 这 样 在 按 Enter 键 和 
单 击 * 跳 转 ? 按 钮 后 其 值 才能 被 程序 正确 获取 。 另 外 , 当 输入 的 页 码 数 过 大 超过 总 页 码 数 时 
需要 进行 判断 ,判断 代码 如 下 。 


if curpage * rs. pagesize > rs. RecordCount then 
if rs. RecordCount mod rs. pagesize = 0 then 
curpage = rs. RecordCount\rs. pagesize 
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else 


curpage = (rs. RecordCount\rs. pagesize) + 1 
end if 
end if 


任务 2 制作 一 个 支持 字段 排序 的 ASP 网 页 


任务 背景 

有 时 为 了 方便 浏览 者 对 记录 的 排序 ,需要 在 网 页 中 提供 数据 排序 的 功能 。 
任务 要 求 

用 户 可 根据 字段 排序 表格 数据 。 

【技术 要 领 】Select 查询 语句 的 编写 。 

【解决 问题 】 数 据 排序 显示 。 

【应 用 领域 】 网 页 数据 排序 。 

效果 图 

在 浏览 器 中 运行 结果 如 图 9-13 所 示 。 

当 Do 排序 功能 - Windows Internet Explorer 

文件 旭 ” 忽 辑 于 ) 查看 收藏 WW) 工具 YI) 帮助 了 0 [3 
四 良 加 国 国 的 记 扫 冤 收 Vk 天 全 全 -总 园 - 加 

地 直上 四 http://1ocslhost/website_asp/chapter09/RI9-6 asp?sort=GoodID 立国 基 到 ”二 ” 爷 转 执 - 隔 先 择 


库存 ”描述 
10 


容量 46 
10 容量 46 
10 容量 46 
容量 为 46 

容量 26 

容量 86 


图 9-13 ADO 排序 显示 数据 效果 


任务 分 析 

在 实现 数据 排序 时 可 在 网 页 上 添加 一 些 超 链接 。 如 二 a href 二 "RW9-6. asp?sort 一 
GoodName" 二 商品 名 称 二 /a 记 . 该 超 链接 通过 在 a 标签 href 属性 指定 的 asp 网 页 (如 
“RW9-6. asp”) 后 附加 参数 sort( 如 “sort 二 GoodName”) 指 定 用 来 排序 的 字段 名 。 网 页 在 查 
询 数 据 库 时 先 获取 该 字段 名 ,然后 根据 该 字段 名 排序 返回 排序 记录 ,这样 就 轻松 实现 了 很 直 
观 的 网 页 记录 排序 了 。 

重点 和 难点 

Select 查询 语句 的 编写 。 

操作 步骤 

利用 ADO 技术 制作 一 个 支持 字段 排序 的 ASP 网 页 ,详细 步骤 如 下 。 


210 ”网 站 建设 与 管理 基础 及 实 训 (ASP 版 ) S 


创建 RW9-6. asp 网 页 ,在 网 页 中 输入 如 下 代码 。 


<%@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %> 
<html ><title> ADO 排序 功能 </title> 


<body> 

< table border = "1" width = "90%" bgcolor = "#fff5ee"> 
<tr> 

<thalign= "left" bgcolor ="#b0c4de"> 

<a href = "RW9 - 6.asp?sort = GoodID"> 商 品 编号 </a> 
</th> 

<thalign= "left" bgcolor =" #b0c4de"> 

<a href = "RW9 - 6.asp?sort = GoodName"> 商 品名 称 </a> 
</th> 

<th align = "left" bgcolor =" #b0c4de"> 

<a href = "RW9 - 6.asp?sort = Category"> 商 品类 别 </a> 
</th> 


<thalign= "left" bgcolor = "#b0c4de"> 
<a href = "RW9 - 6.asp?sort = Price"> 价 格 </a> 
</th> 
<thalign= "left" bgcolor =" #b0c4de"> 
<a href = "RW9 - 6.asp?sort = Quantity"> 库 存 </a> 
</th> 
<thalign= "left" bgcolor =" #b0c4de"> 
<a href = "RW9 — 6.asp?sort = Description"> 描 述 </a> 
</th> 
</tr> 
< 和 
if request. querystring("sort")<>"" then 
Sort = request. querystring("sort") 
else 
sort = "GoodName" 
end if 
set conn = Server. CreateObject ("ADODB. Connection") 
conn. Provider = "Microsoft. Jet. OLEDB. 4.0" 
conn. Open( Server. Mappath( "db/Goods. mdb" ) ) 
set rs = Server. CreateObject("ADODB. recordset") 
sql = "SELECT GoodID, GoodName, Category, Price, Quantity, Description FROM Goods ORDER BY " & sort 
rs. Open sql, conn 
do until rs. EOF 
response. write("<tr>") 
for each x in rs. Fields 
response. write("<td>" & x.value & "</td>") 
next 
rs. MoveNext 
response. write( "</tr >") 
loop 
rs.close 
conn. close 
%> 
</table> 
</body> 
</html > 


< 


如 图 9-13 所 示 , 单 击 “ 商 品 编号 "标题 即 可 实现 记录 按 商品 编号 排序 。 程 序 将 需要 排序 
的 字段 名 附加 到 超 链 接 参 数 中 ,如 二 a href 二 "RW9-6. asp?sort 王 GoodID" 过 商品 编号 一 /a>。 
在 RW9-6.asp 中 获取 sort 参数 值 后 ,通过 在 SQL 查询 语句 中 设置 按 sort 参数 指定 的 字段 
值 排序 即 可 。 


知识 点 拓展 


[1] 通过 OLE DB 提供 者 对 数据 进行 访问 操作 

Microsoft ActiveX Data Objects(ADO) 能 够 编写 通过 OLE DB 提供 者 对 在 数据 库 服 务 
器 中 的 数据 进行 访问 和 操作 的 应 用 程序 。 其 主要 优点 是 易于 使 用 、 高 速度 、 低 内 存 支 出 和 占 
用 磁盘 空间 较 少 。ADO 支持 用 于 建立 基于 客户 -服务 器 和 Web 的 应 用 程序 的 主要 功能 。 

ADO 同时 具有 远程 数据 服务 (RDS) 功 能 ,通过 RDS 可 以 在 一 次 往返 过 程 中 实现 将 数 
据 从 服务 器 移动 到 客户 端 应 用 程序 或 Web 页 ,在 客户 端 对 数据 进行 处 理 , 然 后 将 更 新 结果 
返回 服务 器 的 操作 。RDS 以 前 的 版 本 是 Microsoft Remote Data Service 1. 5, 现 在 RDS 已 
经 与 ADO 编程 模型 合并 ,以 便 简化 客户 端 数据 的 远程 操作 。 

[2] 将 数据 库 访 问 添加 到 Web 页 

ADO 是 一 项 容易 使 用 并 且 可 扩展 的 将 数据 库 访问 添加 到 Web 页 的 技术 。 在 ASP 中 
可 以 使 用 ADO 通过 OLE DB 的 数据 库 驱 动 程序 直接 访问 数据 库 , 也 可 以 通过 脚本 连接 到 
ODBC 兼容 的 数据 库 , 这样 ASP 程序 员 就 可 以 访问 任何 与 ODBC 兼容 的 数据 库 , 如 
Access\SQL Server 和 Oracle 等 。 

若 要 连接 到 ODBC 兼容 的 数据 库 , 必 须 提 供 一 条 使 ADO 定位 .标识 和 与 数据 库 通信 的 
途径 。 这 条 途径 就 是 在 控制 面板 中 的 ODBC 中 添加 相应 的 数据 库 驱 动 程序 ,并 创建 相应 的 
DSN(Data Source Name, 数 据 源 名 )。DSN 代表 ODBC 连接 的 符号 ,其 中 隐藏 了 诸如 数据 
库 名 ,数据库 所 在 目录 ,数据 库 驱 动 程序 、 用 户 ID 和 密码 等 信息 。ADO 就 是 通过 这 些 信息 
定位 并 连接 到 数据 库 的 。 

[3] 分 页 技术 

什么 是 ADO 存 取 数据 库 时 的 分 页 技术 ?如 果 使 用 过 网 站 论坛 ,就 应 该 会 知道 网 站 论 
坛 为 了 提高 页 面 的 读 取 速 度 , 一 般 不 会 将 所 有 的 帖子 全 部 在 一 页 中 罗列 出 来 ,而 是 将 其 分 成 
多 页 显示 ,每 页 显示 一 定数 目的 帖子 数 , 璧 如 20 条 。 浏 览 者 通过 上 下 翻 页 来 浏览 最 近 发 布 
的 帖子 ,这 就 是 ADO 存 取 数据 库 时 的 分 页 技术 。 

目前 实现 数据 库 的 查询 结果 分 页 显示 的 方法 主要 有 以 下 两 种 。 

(1) 首先 将 数据 库 中 所 有 符合 查询 条 件 的 记录 一 次 性 地 都 读 入 Recordset 中 ,存放 在 内 
存 中 ,然后 通过 ADO Recordset 对 象 所 提供 的 几 个 专门 支持 分 页 处 理 的 属性 : pagesize( 页 
大 小 ) .pagecount( 页 数目 ) 以 及 absolutepage( 绝 对 页 ) 来 管理 分 页 处 理 。 

(2) 根据 客户 的 指示 ,每 次 分 别 从 符合 查询 条 件 的 记录 中 将 规定 数目 的 记录 数 读 取出 
来 并 显示 。 

可 以 很 明显 地 感觉 到 , 当 数 据 库 中 的 记录 数 达 到 上 万 或 更 多 时 ,第 一 种 方法 的 执行 效率 
将 明显 低 于 第 二 种 方法 。 但 是 , 当 服务 器 上 数据 库 的 记录 数 以 及 同时 在 线 的 人 数 并 不 是 很 
多 时 ,两 者 在 执行 效率 上 是 相差 无 几 的 ,此 时 一 般 就 采用 第 一 种 方法 ,因为 第 一 种 方法 的 
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ASP 程序 编写 相对 第 二 种 方法 要 简单 明了 得 多 。 
实 训 ”一 个 完整 的 商品 管理 程序 设计 和 实现 


实 训 目 的 
通过 上 机 编程 ,让 学 生理 解 ADO 编程 的 基本 思想 ,掌握 ADO 编程 的 基本 方法 。 掌 握 
数据 库 编程 的 增 、 删 . 改 和 查 等 基本 操作 ,能 熟练 运用 这 些 基本 操作 编写 简单 的 Web 程序 。 


实 训 内 容 

利用 ADO 设计 商品 浏览 ,发布 .修改 和 删除 等 功能 ,实现 一 个 简单 的 商品 信息 管理 
系统 。 

实 训 过 程 

首先 建立 一 个 Access 数据 库 Goods. mdb, 并 在 数据 库 中 创建 Goods 表 , 表 中 共 添 加 了 
GoodID,GoodName,Category, UnitPrice, Quantity 和 Description 共计 6 个 字段 。 分 别 表 
示 商 品 的 编号 ,名称 、 所 属 类 别 、 单 价 .数量 和 描述 等 。 接 着 制作 以 下 6 个 页 面 ,各 个 页 面 的 
名 字 及 功能 如 下 。 

Goods. asp: 浏览 所 有 商品 页 面 ,并 提供 增 、 删 \ 改 和 查 等 功能 。 

GoodAddform. html: 增加 商品 表单 页 面 ,提供 商品 信息 录入 界面 。 

GoodAdd. asp: 增加 商品 处 理 页 面 ,将 增加 商品 表单 页 面 收集 的 数据 提交 数据 库 。 

GoodEditform. asp: 修改 商品 表单 页 面 ,提取 需要 修改 的 商品 信息 显示 以 供 修改 。 

GoodEdit. asp: 修改 商品 处 理 页 面 ,将 修改 商品 表单 页 面 收 集 的 数据 提交 数据 库 。 

GoodDelete. asp: 商品 删除 页 面 ,删除 某 选 定 商品 。 

(1) Goods. asp 页 面 代码 如 下 。 


< html > 
< head > 
<title > 管理 商品 </title> 
</head> 
<body> 
管理 商品 < hr > 
< form method = "post" action = "Goods.asp"> 
< table border = 0 cellpadding = "0"> 
<tr><td> 库 存 商 品 信息 如 下 </td></tr> 
<tr><td> 
<table border = 0 cellpadding= "0"> 
<tr><td> 查 询 项 </td> 
<td> 
< select name = "searchitem"> 
< option value = "GoodName”selected = true > 商品 名 称 </option > 
< option value = "Category"> 商 品类 别 </option> 
< option value = "Description"> 商 品 描述 </option > 
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</select> 
</td> 
<td> 查 询 关 键 字 </td> 
<td>< input type = "next" size= "10" name = "searchvalue"></td> 
<td>< input type = "submit" name = "submit" value = "查询 "></td> 
</tr> 
</table> 
</td></tr> 
<tr> 
<td align = "right"><a href = "GoodAddform. htm1"> 添 加 商品 </a></td> 
</tr> 
<tr><td> 
<table border =1 cellspacing=1> 
<tr> 
<td> 商 品 编号 </td><td> 商 品名 称 </td><td> 商 品类 别 </td> 
<td> 价 格 </td><td> 库 存 </td><td> 商 品 描述 </td><td> 操 作 </td> 
</tr> 
< 和 
Set Conn = Server. CreateObject ("ADODB. Connection") 
url = "Provider = Microsoft. Jet. OLEDB. 4. 0;Data Source = "& Server. MapPath( "Goods. mdb" ) 
Conn. Open( url1) 
Set rs = Server. CreateObject ("ADODB. Recordset") 
rs. ActiveConnection = Conn 
if Request. Form( "submit")<>" 查 询 " then 
rs. Open "select * from Goods order by GoodID” 
else 
searchitem = Request. Form( "searchitem") 
searchvalue = Trim(Request. Form( "searchvalue" )) 
strSQL= "select * from Goods where " 
StrSQL = strSQl&searchitem&" like '%"&searchvalue&"% '" 
rs. Open strSQL 
end if 
do while not rs. EOF 
%> 
<tr> 
<td><% =rs("GoodID") %></td><td><% = rs("GoodName" ) %$ ></td> 
<td><% =rs("Category") %$></td><td><% =rs("Price") %></td> 
<td><% =rs("Quantity") %></td><td><% =rs("Description") %></td> 
<td><a href = "GoodEditform.asp?GoodID= < =rs("GoodID")%>"> 修 改 </a>| 
<a href = "GoodDelete. asp?GoodID = <% = rs("GoodID")% >"> 删 除 </a></td> 
</tr> 
<% 
rs. MoveNext 


loop 
要 > 
</table> 
</td></tr></table></form> 
</body> 
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</html > 
(2) GoodAddform. html 页 面 代码 如 下 。 


<html> 
<head><title > 添加 商品 </title></head> 
<body> 
添加 一 个 商品 <hr > 
< form action = "GoodAdd. asp" method = post> 
<table border = 0 cellspacing=0> 
<tr> 
<td> 商 品 编号 : </td> 
<td>< input name = "GoodID" type= "text" id = "GoodID" size= "20"></td></tr> 
二 
<td> 商 品名 称 : </td> 
<td>< input name = "GoodName"” type = "text"” id = "GoodName" size= "20"></td></tr> 
… 此 处 省 略 了 其 他 表单 代码 
</table> 
< input type = submit value = "添加 商品 "> 
< input type = "reset" name = "Submit"” value = " 重 填 "> 
</form> 
</body> 
</html > 


(3) GoodAdd. asp 页 面 代码 如 下 。 


<% (@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %> 
< title > 添加 商品 </title> 
< 和 
GoodID = Request.Form("GoodID") 
GoodName = Request.Form("GoodName") 
Category = Request. Form( "Category") 
Price= cint(Request. Form("Price")) 
Quantity = cint(Request. Form( "Quantity")) 
Descriptionstr = Request. Form("Description") 
Set Conn = Server. CreateObject ("ADODB. Connection") 
url = "Provider = Microsoft. Jet. OLEDB. 4. 0;Data Source = "& Server. MapPath( "Goods. mdb" ) 
Conn. Open(url) 
strSQL = "insert into Goods values(" 
strSQL = strSQ18&"'"&GoodID&"'," 
strSQL = strSQ1&" '"&GoodNameg&g"'," 
strSQL = strSQ1&" '"&Category&"'," 
strSQL = strSQlg&Priceg"," 
strSQL = strSQl8Quantityg"," 
strSQL = strSQ1&"'"&Descriptionstr&" ')" 
Conn. Execute strSQL 
Conn. Close 
Set Conn = nothing 
Response. Redirect("Goods. asp") 
先 > 


和 “下 下 下 数据 库 扩 展 


(4) GoodEditform. asp 页 面 代码 如 下 。 


<%@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %$> 
<html> 
<head><title > 修改 商品 </title></head> 
<body> 
修改 商品 信息 <hr > 
< 
editid = Request. Querystring("GoodID") 
Set Conn = Server. CreateObject ("ADODB. Connection") 
"url = "driver = {SQL Server}; server = localhost ;UID = sa;PWD = 12345678; Database = TestDB" 
url = "Provider = Microsoft. Jet. OLEDB. 4. 0;Data Source = "& Server. MapPath( "Goods. mdb" ) 
Conn. Open(url1) 
Set rs = Server. CreateObject ("ADODB. Recordset") 
rs. ActiveConnection = Conn 
rs.Open"select * from Goods where GoodID= '"&editidg&"'" 
if rs. state= 1 then 
%> 
< form action = "GoodEdit.asp" method= post> 
< table border =0 cellspacing= 0> 
<tr><td> 商 品 编号 : </td> 
<td>< input type= "text"” size="20" name="GoodID" value =<% = rs("GoodID")%> 
readonly = true></td> 
</tr> 
<tr> 
<td> 商 品名 称 : </td> 
<td>< input type = "text" size="20" name = "GoodName" value =<$% = rs("GoodName") $>> 
</td> 
</tr> 
“此 处 省 略 了 其 他 表单 代码 
</table> 
< input type = submit value = "修改 "> 
</form> 
</body> 
<% 
end if 
rs.close 


Set rs = nothing 
Conn. close 

Set Conn = nothing 
%> 

</html > 


(5) GoodEdit. asp 页 面 代码 如 下 。 


<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %$> 
<title > 修改 商品 </title> 

<% 

GoodID = Request. Form( "GoodID") 

GoodName = Request. Form( "GoodName") 

Category = Request. Form( "Category") 
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全 
Price = cint(Request. Form("Price")) 
Quantity = cint(Request. Form( "Quantity")) 
Descriptionstr = Request. Form("Description") 
Set Conn = Server. CreateObject ("ADODB. Connection") 
url = "Provider = Microsoft. Jet. OLEDB. 4. 0;Data Source = "&Server. MapPath("Goods. mdb") 
Conn. Open(url) 
set rs = Server. CreateObject ("ADODB. RecordSet") 
"修改 记录 
StrSQL = "select * from Goods where GoodID = '"g&GoodIDg"'" 
rs. open strSQL, conn, 1,3 
rs("GoodName" ) = GoodName 
rs("Category") = Category 
rs("Price") = Price 
rs("Quantity") = Quantity 
rs("Description") = Descriptionstr 
rs. update 
Conn. Execute strSQL 
Conn. Close 
Set Conn = nothing 
Response. Redirect( "Goods.asp") 
%> 


(6) GoodDelete. asp 页 面 代 码 如 下 。 


<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" 和 > 

<title > 删除 商品 </title> 

< 和 

deleteid = Request. QueryString("GoodID") 

Set Conn = Server. Create0bject("ADODB. Connection") 

'url = "driver = {SQL Server}; server = localhost;UID = sa;PWD= 12345678;Database = TestDB" 
url = "Provider = Microsoft.Jet.OLEDB.4.0;Data Source = "& Server. MapPath( "Goods. mdb" ) 
Conn. Open( url1) 

strSQL = "delete from Goods where GoodID= '"&deleteidg"'" 

Conn. Execute strSQL 

Conn. Close 

Set Conn = nothing 

"end if 

Response. Redirect("Goods.asp") 

%> 


程序 的 运行 结果 如 图 9-14 一 图 9-16 所 示 , 当 单 击 “添加 商品 ”链接 时 会 打开 如 图 9-15 
所 示 的 “添加 商品 "页面 ; 当 单 击 “ 修 改 " 链 接 时 ,会 打开 如 图 9-16 所 示 的 “修改 商品 "页面 ; 
单 击 “ 删 除 ”链接 会 删除 某 条 信息 ; 输入 关键 词 . 单 击 “ 查 询 ” 按 钮 能 查询 出 符合 条 件 的 商品 。 


实 训 总 结 


通过 本 章 一 个 简单 商品 信息 管理 系统 的 设计 实现 ,学 生 应 该 能 够 掌握 ADO 编程 的 基 
本 方法 ,熟悉 ADO 编程 的 常用 操作 (如 查询 、 插 入、 修改 和 删除 等 ) ,同时 能 制作 简单 动态 网 
站 或 小 型 信息 管理 系统 。 
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管理 商品 


库存 商品 信息 如 下 
查询 项 | 商品 名 称 司 查 询 关 键 字 


| 商 虽 类别 价格 库存 商 
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图 9-14 管理 商品 页 面 
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添加 一 个 商品 


商品 编号 ，| 
商品 名 称 ，| 
商品 类 别 ，| 数 码 困 
价格 ， 
库存 ， 


描述 ， 


CE 


本 地 Intrenet 
图 9-15 添加 商品 页 面 


3 能 汉 商 品 - Yindows Internet Erplorer 
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修改 商品 信息 


商品 编号 ，|00006 


商品 名 称 ， 惩 型 0 盘 
类 别 ， Ei 
价格 : 


图 9-16 ”修改 商品 页 面 
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写 


综合 任务 


1. 编写 一 个 ASP 连接 Access 数据 库 的 程序 ,同时 要 输出 Access 数据 库 某 一 张 表 中 的 
数据 。 

2. 参照 模拟 制作 任务 ,编写 一 个 既 有 翻 页 又 有 排序 功能 的 商品 浏览 页 面 。 

3. 参照 实 训 内 容 , 编 写 一 个 简单 的 学 生 信 息 管理 系统 ,要 求实 现 对 学 生 信 息 的 增 、 删 、 
改 和 查 等 基本 操作 。 


注册 登录 


注册 登录 模块 是 大 部 分 Web 应 用 程序 都 应 有 的 基本 模块 ,是 用 户 首先 使 用 的 功能 , 它 
的 好 坏 直接 影响 使 用 者 对 应 用 程序 的 第 一 印象 。 本 模块 通过 一 个 简单 的 注册 和 登录 过 程 ， 
介绍 一 般 网 站 注册 和 登录 模块 实现 的 基本 方法 。 

能 力 目标 

1. 能 设计 简单 的 用 户 表 

2. 能 熟练 使 用 Session 和 Cookie 记录 用 户 登 录 信息 

3. 能 熟练 使 用 jQuery 框架 实现 表单 验证 

知识 目标 

1. Trim( ) 函 数 的 用 法 

2. 记录 集 对 象 Recordset 的 AddNew 和 Update 方法 的 用 法 

3. JavaScript 函数 alert( ) 的 用 法 


知识 储备 


知识 ”注册 登录 模块 的 工作 原理 


一 般 网 站 的 注册 模块 是 在 注册 首页 收集 用 户 的 基本 信息 ,并 判断 在 数据 表 中 是 否 已 经 
存在 该 用 户 名 , 若 不 存在 则 使 用 该 用 户 名 注册 , 若 要 注册 的 用 户 名 已 经 存在 , 则 提示 用 户 更 
改 注册 名 。 同 时 在 注册 页 面 中 还 需要 收集 用 户 的 其 他 信息 ,如 密码 提示 问题 和 问题 答案 等 ， 
注册 成 功 后 还 会 给 用 户 相 关 的 反馈 或 返回 登录 界面 让 用 户 登录 。 

登录 模块 通常 利用 用 户 输入 的 登录 信息 从 数据 表 中 查找 ,找到 相关 信息 则 成 功 登 录 , 否 
则 提示 出 错 信 息 ,并 让 用 户 重新 登录 。 成 功 登录 后 一 般 会 将 用 户 的 登录 信息 保存 到 Session 
变量 中 ,这 样 服务 器 就 能 在 用 户 登录 后 根据 Session 中 的 信息 确定 用 户 的 身份 。 

当然 还 可 以 在 用 户 登录 成 功 后 将 用 户 的 登录 信息 保存 到 Cookie 中 ,这 样 在 Cookie 过 
期 前 用 户 再 次 访问 网 站 时 就 不 需要 再 登录 了 。 退 出 模块 的 操作 相对 比较 简单 一 些 , 只 需要 
将 登录 时 登记 在 Session 中 的 内 容 清空 即 可 , 若 Cookie 中 也 保存 有 用 户 登录 信息 , 则 需要 将 
Cookie 设置 为 过 期 使 其 失效 。 
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模拟 制作 任务 


任务 1 设计 数据 表 


任务 背景 

本 模块 需要 用 到 用 户 信息 ,因此 需要 设计 一 个 简单 数据 表 来 存储 注册 用 户 的 基本 信息 。 
任务 要 求 

(1) 数据 表 中 至 少 应 该 有 用 户 名 和 密码 字段 。 

(2) 用 户 名 不 能 作为 主键 ,应 该 还 有 一 个 能 唯一 区 别 每 个 用 户 的 字段 ,比如 用 户 编号 。 
【技术 要 领 】 使 用 Access* 数 据 表 设计 器 "创建 数据 表 。 

【解决 问题 】 主 键 和 字段 设置 。 

【应 用 领域 】 数 据 表 设 计 。 


任务 分 析 

本 任务 较为 简单 ,用 户 表 也 相对 比较 简单 ,只 需 有 用 户 编号 ,用户 名 和 密码 等 字段 即 可 。 
重点 和 难点 

用 户 表 主 键 设置 。 

操作 步骤 


(1) 创建 一 个 数据 库 文件 data. mdb, 双 击 打开 data. mdb 文件 ,如 图 10-1 所 示 。 


使 用 设计 器 外 建 表 
使 用 向 导 创建 表 
通过 输入 数据 他 建 表 


users) 


图 10-1 打开 的 数据 库 文件 界面 


(2) 选择 图 10-1 中 的 “使 用 设计 器 创建 表 ”, 打 开 数 据 表 设计 器 ,设计 表 的 各 个 字段 信 
息 , 如 图 10-2 所 示 。 

(3) 设计 完毕 后 ,保存 表格 ,将 表格 命名 为 "users”。 

(4) 编写 简单 的 连接 数据 库 的 公共 代码 ,连接 数据 库 的 代码 写 到 了 conn. asp 文件 中 ， 
详细 代码 如 下 。 

<% db= "data/data. mdb" 


Set conn = Server. CreateObject ("ADODB. Connection") 
url = "Provider = Microsoft. Jet. OLEDB. 4. 0;Data Source = "& Server. MapPath( db) 
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< 


usernane 
password 


字段 说 明 是 可 选 的 。 用 于 帮助 说 明 该 字段 ， 
而 且 当 在 窗 体 上 选择 该 宇 段 时 ， 也 : 3 
上 显示 该 说 明 。 和 


输入 法 模式 开局 
JINE 语句 模式 ( 权 日 文 ) 无 转化 
暂 能 标记 L 


图 10-2 ”利用 数据 表 设 计 器 设计 表 的 字段 


conn. Open(url) 要 > 
在 其 他 需要 连接 数据 库 的 网 页 中 只 需要 利用 下 面 的 代码 即 可 导入 该 公共 的 代码 。 


<! -- #include file= "conn.asp” -一 > 


任务 2 编写 注册 模块 


任务 背景 

数据 表 设 计 好 后 ,初始 是 没有 用 户 数据 的 ,只 有 用 户 注册 后 才 有 数据 ,因此 需要 编写 用 
户 注册 模块 。 

任务 要 求 

(1) 需要 提供 表单 让 用 户 输入 基本 信息 。 

(2) 用 户 提交 后 应 该 将 有 效 注册 信息 写 人 数据 库 的 users 表 中 。 

【技术 要 领 】 如 何 将 有 效用 户 注 册 信 息 写 人数 据 表 。 

【解决 问题 】 注 册 信 息 的 收集 和 存储 。 

【应 用 领域 3】 用户 注册 。 

效果 图 

注册 页 面 的 运行 如 图 10-3 所 示 ,输入 注册 用 户 名 、 密 码 、 提 示 问 题 和 答案 等 信息 , 单 击 
“注册 ?按钮 即 可 。 若 注册 成 功 则 给 出 提示 ,如 图 10-4 所 示 , 和 否则 给 出 如 图 10-5 所 示 的 
提示 。 

任务 分 析 

注册 模块 首先 通过 注册 表单 收集 用 户 所 填写 的 信息 ,然后 到 数据 表 中 查找 该 用 户 是 否 
存在 ,如 果 已 经 存在 , 则 不 能 注册 ; 否则 可 以 注册 。 一 般 来 说 ,车 注册 成 功 则 跳 转 到 登录 页 
面 ,让 刚 注册 过 的 用 户 进 行 登录 ; 车 注册 不 成 功 则 仍 停留 在 注册 页 面 ,给 用 户 重新 注册 的 


机 会 。 
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到 注册 页 面 - Windors Internet Exzplorer 
文件 四 ”编辑 中 ”查看 WD 收 意 人 0 工具 四 帮助 中 EE 


加 扫 -~ 晶 " 国 国 匆 有 搜索 去 收 庆 x 加 全 - 急 团 " 口 训 加 
地 址 ) | 各 http://1ocalhost/website_asp/chapterl0/1ogia/reg ap 司 图 8 tsE > 


用 P 名 
密码 

确认 密码 

密码 提示 问题 

密码 提示 答案 


图 10-3 注册 页 面 


Nicrosoft Internet Explorer Microsoft Internet Erplorer 


企 悠 输入 的 用 尸 名 已 存在 ， 请 返回 重新 输入 ! 


L_iE 
图 10-4 注册 成 功 图 10-5 注册 失败 
重点 和 难点 
注册 信息 的 收集 和 写 人 数据 库 。 
操作 步骤 
(1) 新 建 注 册页 面 reg. asp, 并 在 页 面 中 添加 表单 及 表单 元 素 , 然 后 添加 相应 的 数据 处 
理 代码 ,完整 代码 如 下 。 


妃 一 根据 收 集 到 的 用 户 信息 进行 判断 ,是 注册 成 功 还 是 重新 注册 -一 > 

<! -- #include file= "conn.asp" -一 > 

<% 

if Request("action") = "reg" then 

' 查 找 注册 用 户 ,如 果 存 在 , 则 提示 已 存在 ,返回 登录 页 面 并 结束 程序 

sql= "select * from users where username = '"&trim(Request("username"))&"'" 
Set rs = conn. Executel( sql) 

if not rs. eof then 

Response. Write "< script language = 'javascript'> window.alert(' 您 输入 的 用 户 名 已 存在 ,请 返回 重 
新 输入 !") ;history. back( - 1);</script >" 

Response.End() 

end if 

' 如 果 用 户 不 存在 , 则 通过 rs 对 象 的 AddNew 和 Update 方法 添加 新 用 户 

sql = "select * from users" 

Set rs = Server. CreateObject("ADODB. Recordset") 
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rs. Open sql,conn,1,3 
rs.addnew 
rs("username") = trim(Request. Form("username" )) 
rs("password") = trim(Request. Form("password1")) 
rs("question") = trim(Request. Form("question")) 
rs("answer") = trim(Request. Form( "answer")) 
rs.Update 
rs.Close 
Set rs = nothing 
Response. Write "< script language = javascript > alert (' 注 册 成 功 , 单 击 确定 立即 登录 ! ' ); 
location. replace( 'login. asp') ;</script >" 
Response. End 
end if 
先 > 
<HIML> 
< HERAD > 
< Title> 注 册页 面 </Title> 
< METRA http - equiv = "Content - TYpe"”content = "text/html; charset = gb2312"> 
< META name = "Generator" content = "Rsp Studio 1.0"> 
</HEAD> 
<BODY> 
所 一 下 面 的 代码 主要 是 负责 收集 用 户 的 注册 信息 一 > 
<! —— #include file = "top.asp" 一 一 > 
<table width = "500" bgcolor = " #FFFFFF" border ="1"” align = "center" cellpadding = "5" 
cellspacing = "0"> 
<tr> 
<td><div align = "center"> 用 户 注册 
</div> 
<form name= "forml" id= "forml" method = "post" action = "?action = reg" onSubmit = "return 
check()"> 
<table width =" 347" border = "1" align = "center" cellpadding = " 0" cellspacing = " 0" 
cellingspace = "0"> 
<tr> 
<td width= "142"> 用 户 名 </td> 
< td width = "179">< input name = "username"” type = "text" id= "username"></td> 
</tr> 
<tr> 
< td> 密 &nbsp; Snbsp; 码 </td> 
<td>< input name = "password1" type = "password" id= "password"></td> 
</tr> 
<tr> 
<td> 确 认 密 码 </td> 
<td>< input name = "password2" type = "password" id = "password"></td> 
</tr> 
<tr> 
< td> 密 码 提示 问题 </td> 
<td>< input name = "question" type = "text" id= "question"></td> 
</tr> 
<tr> 
<td> 密 码 提示 答案 </td> 


<td>< input name = "answer" type= "text" id= "answer"></td> 
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</tr> 

<tr> 

<td colspan = "2" align = "center">< input type = "submit" name = "submit" value = "注册 "> 
< input type = "reset" name = "submit" value = " 重 置 "></td> 

</tr> 

</table> 

</form> 

</td> 

</tr> 

</table> 

</BODY > 

</HTML > 


注意 : 页 面 代码 中 的 二 ! 一 一 #include file 二 "top. asp" 一 一 二 代表 在 本 页 面 中 显示 


asp 页 面 内 容 。 通 常 在 制作 动态 网 站 时 把 各 个 网 页 中 公共 的 部 分 制作 成 一 个 通用 的 
(如 top. asp)。 在 其 他 网 页 需要 用 到 这 个 通用 的 页 面 时 用 代码 一 ! 一 一 #include file 一 ” 


top. 
页 面 
页 面 


名 .asp" 一 一 盖 导入 即 可 。 这 种 编写 代码 的 方法 为 日 后 网 站 的 维护 更 新 带 来 很 大 的 方便 。 


(2) 制作 top. asp 网 页 ,在 该 网 页 中 输入 如 下 代码 。 


< meta http - equiv = "content - type" content = "text/html" chaarset = gb2312 > 
<table width = "500”bgcolor = "#FFFFFF" border ="1”align = "center”cellpadding = 
cellspacing = "0"> 
<tr> 
<td align = "center"><a href = "index. asp"> 首 页 </a> 
< 和 
if Session("name") = ""then 
先 > 
<a href = "reg.asp"> 注 册 </a> <a href = "login.asp"> 登 录 </a> 
<% 
else 
%> 
欢迎 您 <% = Session("name") %>,<a href = "loginout.asp"> 注 销 登录 </a> 
<a href = "search. asp"> 密 码 查询 </a> 
<% 
end if 
%></td></tr> 
</table> 


"10" 


注意 : top. asp 网 页 会 根据 用 户 的 登录 情况 进行 相应 的 显示 ,已 经 登录 的 用 户 会 显示 
“首页 ”“ 注 销 登 录 ” 和 “密码 查询 ”三 个 超 链接 。 尚 未 登录 的 用 户 会 显示 “首页 ”“ 注 册 ” 和 


“登录 ”三 个 超 链接 。 
任务 3 编写 登录 模块 


任务 背景 
用 户 注 册 后 就 能 用 注册 的 用 户 登录 网 站 ,登录 模块 通常 是 在 页 面 上 利用 表单 收集 


用 户 


信息 (如 用 户 名 和 密码 等 ) ,然后 到 数据 表 中 查找 该 用 户 信息 , 若 找到 则 登录 成 功 ,否则 登录 


不 成 功 。 
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任务 要 求 
(1) 登录 过 程 中 应 该 要 求 用 户 输入 验证 码 。 
(2) 需要 用 Cookie 存储 用 户 登录 信息 ,用 户 再 次 访问 网 站 时 就 无 须 再 次 登录 。 
【技术 要 领 】 验 证 码 的 使 用 以 及 在 Cookie 中 记录 用 户 登 录 信 息 。 
【解决 问题 】 验 证 码 的 使 用 和 利用 Cookie 保留 用 户 登 录 信 息 。 
【应 用 领域 】 用 户 登 录 。 
效果 图 
如 图 10-6 所 示 为 登录 页 面 , 负 责 收 集 用 户 信息 ,如 图 10-7 所 示 为 登录 成 功 后 的 页 面 ， 
如 图 10-8 所 示 为 登录 失败 后 的 页 面 。 
习 号 录 页 面 -Windows Internet Explorer 
文件 四 编辑 E) 查看 W) 收藏 AW) 工具 CD) 帮助 0 
@ 提 -昌国 国 久 有时 次 x 因 全 -各 


地 让 四) 莉 http://1ocalhost/websits_spp/chspterl0/1ogin/login ssp > 加 9 到 


请 输入 您 的 登录 信息 
用 户 名 
密 码 
验证 码 
保 留 


图 10-6 登录 页 面 


马 网 站 首页 - Winaows Internet Explorer 
文件 中) 编辑 EE) 查看 W) 收 基 U) 工具 GD) 帮助 0 


加 银 -上 - 国 国 多 万 抽动 kg 天 外 后 -总 回 - 口 以 回 
地 让 四 外 http://1ocalhost/website_asp/chapteri0/login/index.asp 所 | 国 竺 到 访 访 > 


这 里 是 网 站 首页 | wdw 欢迎 回来 ! 这 


图 10-7 登录 成 功 页 面 


沁 司 录 失败 - Windows Internet Explorer 
文件 四) 编辑 E) 查看 W) 收藏 wm) 工具 中 帮 且 0D EE 
加 良 -有 国 国 多 中搜 雪 友 收 & 天 你 合 -总 团 " 口 训 回 


地 十 加 狼 Mtp://1ocqhost/website_asp/chapterl0/1ogiVerror.asp | 国 轩 到 证 仿 ” 


登录 失败 ， 检 查 用 户 名 和 密码 是 否 正确 


晤 本 地 Intranet 


图 10-8 登录 失败 页 面 
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这 


从 图 10-6 可 以 看 出 用 户 登 录 时 选择 在 本 地 保留 登录 信息 的 时 间 为 一 周 。 所 以 一 周 之 
内 用 户 再 次 访问 index. asp 页 面 时 ,浏览 效果 仍然 如 图 10-7 所 示 。 而 一 周 之 后 ,保存 在 
Cookie 中 的 用 户 信息 过 期 ,再 次 访问 index. asp 页 面 时 浏览 效果 如 图 10-9 所 示 。 


于 网 站 首页 - Windows Internet Ezplorer 
文件 外 ”编辑 查看 如 收 丫 人 工具 GD) 帮助 由) EE 


加 有 腿 - 曲 国 国 多 疡 搜索 友 收 天 加 启 - 有 四- 口 贡 回 
地 十 加 | 全 http://1ocalhost/rebsite_asp/chapter10/1ogin/index. asp > 


这 里 是 网 站 首页 | ”登录 


图 10-9 ”Cookie 过 期 后 浏览 效果 


任务 分 析 

成 功 登 录 的 条 件 是 利用 用 户 名 和 密码 作为 查询 条 件 能 在 数据 表 里 找到 相应 的 记录 ,只 
有 这 两 个 信息 和 验证 码 都 输入 正确 后 用 户 才 能 正确 登录 。 

作为 一 个 较 好 的 登录 模块 ,除了 能 正确 地 使 用 合法 用 户 通 过 验证 正常 登录 外 ,还 需要 在 
用 户 登 录 失 败 时 给 出 相应 的 提示 ,以 便 用 户 根 据 提示 做 相应 的 处 理 。 为 了 做 到 更 加 入 性 化 
的 登录 ,可 以 提供 保存 用 户 登录 信息 的 功能 。 例 如 ,将 用 户 登 录 信 息 保 存 到 用 户 本 地 的 
Cookie 中 ,在 Cookie 过 期 之 前 ,用 户 再 次 访问 网 站 时 就 无 须 登 录 。 另 外 ,为 了 提高 登录 的 
安全 性 ,防止 恶意 用 户 利用 黑客 程序 登录 网 站 后 台 , 还 可 在 登录 时 要 求 用 户 提供 登录 验 
证 码 。 

重点 和 难点 

登录 验证 码 的 处 理 以 及 将 用 户 登 录 信息 记录 在 用 户 本 地 Cookie 中 。 

操作 步骤 

登录 页 面 是 login. asp, 登 录 信 息 验证 页 面 是 loginok. asp, 该 页 面 判断 登录 是 否 成 功 , 若 
登录 成 功 跳 转 到 index. asp 页 面 ,否则 跳 转 到 error. asp 页 面 。 

(1) 制作 index. asp 页 面 ,其 完整 代码 如 下 所 示 。 


<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %$> 
<html xmlns = "http://www.w3.org/1999/xhtml"> 
<head> 
<meta http - equiv = "Content — Type" content = "text/html; charset = gb2312" /> 
<title> 网 站 首页 </title> 
</head> 
<body> 
<div align= "center"> 这 里 是 网 站 首页 ! 
<% 
if Request. Cookies("user")("UserName") ="" then 
response. Write "<a href = login. asp> 登 录 </a>" 
else 
Response. Write Request. Cookies("user")("UserName") &"&nbsp;" 
Session( "name") = Request. Cookies( "user") ("UserName") 
response. Write( "欢迎 回来 !&nbsp;") 
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response. Write "<a href = loginout.asp > 注销 登录 </a>" 
end if 
多 > 
</div> 
</body> 
</html > 


注意 : 在 访问 index. asp 页 面 时 ,首先 判断 用 户 保存 在 Cookie 中 的 信息 是 否 存在 , 若 不 
存在 则 提示 用 户 登 录 。 若 存在 则 保存 用 户 信息 到 用 户 的 Session 中 ,并 显示 “注销 登录 ” 超 
链接 。 

(2) 制作 login. asp 页 面 ,其 完整 代码 如 下 所 示 。 


<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %> 
< html > 
<head > 
< meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 登 录 页 面 </title> 
</head> 
<body> 
<! -- #include file= "top.asp" --—> 
< form id = "forml" name = "forml" method = "post" action = "loginok.asp"> 
<table width= "500" border = "1" align= "center" cellpadding = "0" cellspacing = "0"> 
<tr> 
<td colspan = 
</tr> 
<tr> 
<td width= "199" align = "right"> 用 户 名 </td> 
<td width= "295">< label > 
< input name = "username" type = "text" id= "username" /> 
</label ></td> 
</tr> 
<tr> 
<td align = "right"> 密 Snbsp;&nbsp; 码 </td> 
<td>< label> 
< input name = "pwd" type = "password" id = "pwd" /> 


2" align = "center"> 请 输入 您 的 登录 信息 </td> 


</label ></td> 

</tr> 

<tr> 
<td align = "right"> 验 证 码 </td> 
<td> 


< input name = "t3" type= "text" id= "t3" value="" size= "10" maxlength = "4"> 
< img id = "yanzhengma”src = "GetCode. asp"” alt = "登录 验证 码 ”border = "0" style= 
"cursor:hand;" title= "看 不 清 ,点 这 里 换 一 张 " onClick = "this. src= 'GetCode.asp'"/></td> 


</tr> 
<tr> 
<tdalign= "right"> 保 &nbsp;&nbsp; 留 </td> 
<td>< label> 


< select name = "savetime” id = "savetime"> 
< option value= "一 1"> 无 </option> 
< option value = "7"> 一 周 </option> 
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<option value = "30"> 一 个 月 </option > 
< option value = "365"> 一 年 </option> 
</select> 
</label ></td> 
</tr> 
<tr> 
<td colspan = "2" align= "center">< label> 
< input type = "submit" name = "Submit" value= "登录 " /> 
gnbsp;< input type = "reset" name = "Submit2" value= " 重 置 " /> 
</label ></td> 
</tr> 
</table> 
</form> 
</body> 
</html > 


注意 : 验证 码 由 网 页 GetCode. asp 产生 ,该 网 页 产生 验证 码 后 将 其 保存 到 Session 
("GetCode") 变 量 中 。 在 登录 处 理 时 通常 将 用 户 输入 的 验证 码 同 Session("GetCode") 变 量 
保存 的 验证 码 进 行 比较 ,如 果 正 确 则 继续 比较 用 户 名 和 密码 等 信息 , 当 这 些 信 息 都 正确 就 允 
许 用 户 登 录 , 否 则 不 能 正确 登录 。 

(3) 制作 loginok. asp 页 面 ,其 完整 代码 如 下 所 示 。 


<!—— #include file= "conn.asp” -> 

< 和 

Session.timeout = 30 "设置 session 的 过 期 时 间 

username = trim(Request.Form("username") ) 

pwd = trim(Request. Form("pwd" ) ) 

Savetime = request. Form( "savetime") 

' 验 证 用 户 输入 的 验证 码 是 否 正确 

if cstr(session("getcode"))<>cstr(trim(request("t3"))) then 
response. Write "< script LANGUAGE = 'javascript'> alert( ' 请 输入 正确 的 验证 码 !');history. go 
(—1);</script >" 

response. end 


end if 
' 如 果 用 户 没有 输入 用 户 名 和 密码 ,让 用 户 返 回 重新 登录 
if username=" "or pwd="" then 


Response. Redirect( "login. asp") 
end if 
' 在 数据 表 中 查找 具有 该 用 户 名 和 密码 的 记录 
sql = "Select * fromusers where username = '"&username&"'and password = '"g&pwdg"'" 
Set rs = conn. Execute( sql) 
"如 果 找 到 记录 ,将 登录 信息 保存 到 Session 和 Cookie 中 , 否则 跳 转 到 出 错 页 面 
if not rs. eof then 
Session("name" ) = username 
Session("ID") = rs("ID") 
Response. Cookies( "user" ) ("UserName") = username 
Response. Cookies( "user") ("Password") = pwd 
Response. Cookies( "user") .Expires = (now() +savetime) ' 设 置 过 期 时 间 
Response. Redirect "index.asp" 
else 
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Response. Redirect "error.asp" 
Response. End 

end if 

> 


(4) 制作 error. asp 页 面 ,其 完整 代码 如 下 所 示 。 


<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %> 

<IDOCTYPE html PUBLIC " —//W3C//DTD XHTML 1. 0 Transitional//EN" " http://www. w3. org/TR/ 
xhtml1/DTD/xhtml1 - transitional. dtd"> 

< html xmlns = "http://www. w3.org/1999/xhtml"> 

< head> 

<meta http - equiv = "Content — Type" content = "text/html; charset = gb2312" /> 
<title> 登 录 失 败 </title> 

</head> 

<body> 

登录 失败 ,检查 用 户 名 和 密码 是 否 正确 <a href = "login.asp" target = "_self"> 返 回 登录 </a> 
</body> 

</html > 


任务 4 编写 注销 模块 


任务 背景 
注销 模块 的 实现 比较 简单 ,但 却 是 必 不 可 少 的 。 
任务 要 求 


(1) 通过 清空 Session 功能 注销 用 户 。 

(2) 用 户 注销 完 后 让 用 户 返回 首页 。 

(3) 如 果 用 户 信息 已 保存 到 Cookie 中 ,还 需要 将 Cookie 设置 为 过 期 。 

【技术 要 领 】 使 用 清空 Session 实现 用 户 注销 。 

【解决 问题 】 清 空 Session 。 

【应 用 领域 用户 注销 。 

任务 分 析 

一 个 用 户 离开 了 网 站 而 不 注销 可 能 会 使 登录 信息 仍然 保留 在 服务 器 上 。 一 般 情况 下 服 
务 器 保留 用 户 登 录 信 息 都 是 通过 Session 的 方式 来 实现 ,所 以 要 完成 退出 的 功能 ,只 需要 将 
该 用 户 登录 时 网 站 所 保留 的 Session 值 清空 即 可 。 如 果 用 户 信息 已 保存 到 本 地 Cookie 中 ， 
还 需要 将 Cookie 设置 为 过 期 。 

重点 和 难点 

清空 Session 和 设置 Cookie 过 期 。 

操作 步骤 

制作 loginout. asp 页 面 ,其 完整 代码 如 下 所 示 。 

<%@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" 和 > 

<% 

Session("name") ="" 


Session("ID") 


Response. Cookies( "user").Expires= (now()—1) 
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Response. Write( "< script Language = javascript > 
alert(' 退 出 登录 成 功 !'); location. href( 'index.asp');</script >") 
Response. End( ) 

> 


注意 : 该 代码 的 功能 通过 清空 Session 和 设置 本 地 Cookie 过 期 ,从 而 实现 用 户 注销 。 
任务 5 用 jQuery 实现 表单 的 验证 


任务 背景 
有 时 在 验证 用 户 信息 时 ,需要 在 用 户 输入 用 户 名 时 立即 获得 该 用 户 名 是 否 已 经 被 注册 
的 反馈 。 如 果 已 经 被 注册 , 则 提示 用 户 输入 其 他 用 户 名 。 要 完成 这 种 无 刷新 的 反馈 ,通常 需 
要 用 到 Ajax 框架 ,jQuery 就 是 目前 应 用 比较 广泛 的 Ajax 框架 。 
任务 要 求 
用 户 输入 用 户 名 时 可 立即 获得 该 用 户 名 是 否 已 经 被 注册 的 反馈 。 
【技术 要 领 】 使 用 jQuery 实现 无 刷新 的 表单 验证 。 
【解决 问题 】 无 刷新 表单 验证 。 
【应 用 领域 】 表 单 验证 。 
效果 图 
运行 添加 了 jQuery 表单 验证 后 的 注册 页 面 效果 如 图 10-10 所 示 。 
已 注册 页 而 - Windows Internet Explorer 
文件 GE) ”编辑 下 ) 查看 WD 收藏 和 工具 CD) 帮助 人 0 
[1 


BE 的 ] http://localhostywsbsite_aspychapter10/1ogin/reg_jquery. asp 


首页 注册 登录 
用 户 注册 


用 户 名 ， d 对 不 起 ，wdw 已 经 存在 ! 
密码 
A 
窗 码 提示 问题 ， 
密码 提示 管 案 : 


饮 本 地 Intranet 
图 10-10 jQuery 表单 验证 效果 


任务 分 析 

本 任务 需要 用 到 jQuery 的 load(url,[data],[callback]) 方 法 实现 表单 验证 ,除了 需要 
修改 任务 2 的 reg. asp 网 页 外 .还 需要 制作 一 个 ASP 页 面 ( 如 userExist. asp), 用 于 检测 上 
户 想 注册 的 用 户 名 是 否 已 经 被 注册 。 


重点 和 难点 
jQuery 在 表单 验证 中 的 应 用 。 
操作 步骤 


(1) 修改 reg. asp 页 面 ,其 完整 代码 如 下 所 示 。 
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所 一 -下 面 的 代码 主要 根据 收集 到 的 用 户 信 息 进行 判断 , 是 注册 成 功 还 是 重新 注册 -一 > 


<L —— #include file= "conn.asp" -一 > 
< 和 
… "省 略 了 注册 VBScript 代码 
多 > 
<HIML> 
< HERD> 
<Title> 注 册页 面 </Title> 


<META http— equiv = "Content - Type" content = "text/html; charset = gb2312"> 


<META name = "Generator"” content = "Asp Studio 


1.0"> 


< script language = "javascript" src = "js/jQouery- 132min2. js"></script > 


< script language = "javascript"> 
三 < 
function isEmpty( text) 
{ 
if(text =="") 
return true; 
else 
return false; 
} 
function isEqual (textl1, text2) 
{ 
if(textl == text2) 
return true; 
else 
return false; 
. 
function check() 
{ 
var 上 = document. getElementById("form1"); 
if(isEmpty(f.username. value)) 
{ 
alert(" 用 户 名 必须 填写 !1"); 
f. username. focus( ); 
return false; 
} 
if(isEmpty(f.passwordl. value)) 
{ 
alert(" 密 码 不 能 为 空 !"); 
f. password1. focus( ); 
return false; 
} 
if(isEmpty(f. password2. value)) 
alert(" 重 复 密码 不 能 为 空 !"); 


// 判 断 字符 串 是 否 为 空 


// 判 断 两 字符 串 是 否 相 同 


// 获 取 表单 对 象 
// 验 证 用 户 名 是 否 为 空 


// 验 证 密码 是 否 为 空 


// 验 证 重复 密码 是 否 为 空 
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f.password2. focus(); 
return false; 
} 
if(!isEqual(f.passwordl. value,f.password2.value)) // 验 证 两 次 密码 是 否 相 同 
. 
alert(" 密 码 与 重复 密码 必须 相同 !!" ); 
f.passwordl. focus(); 
return false; 
} 
if(isEmpty(f. question. value)) // 验 证 密码 提示 问题 是 否 为 空 
{ 
alert(" 密 码 提示 问题 必须 填写 !!" ); 
f. username. focus( ); 
return false; 
} 
if(isEmpty(f.answer. value)) // 验 证 密码 提示 问题 答案 是 否 为 空 
{ 
alert(" 密 码 提示 问题 答案 必须 填写 !1"); 
f. username. focus( ); 
return false; 
} 
return true; 
} 
function startCheck(oInput){ 
// 首 先 判断 是 否 有 输入 ,没有 输入 直接 返回 ,并 提示 
if(!oInput. value){ 


oInput. focus( ); // 聚 焦 到 “用户 名 "输入 框 
document. getElementById("UserResult"). innerHTML = "用 户 名 不 能 为 空 !1"; 
return; 
} 
oInput = $ .trim(oInput. value); // 使 用 jQuery 的 $ .trim( ) 方 法 过 滤 左 右 空 格 
var sUrl = "userExist.asp?username =" + oInput; 
sUrl = encodeURI( sUr1); // 使 用 encodeURI( ) 编 码 , 解决 中 文 乱码 问题 
$ ("#UserResult"). load( sUrl, function(data){ 
$ ("#UserResult"). html(decodeURI( data) ); // 使 用 decodeURI( ) 解 码 
} 
); 
} 
-=> 
</script > 
</HEAD> 
<BODY> 


< 一 下 面 的 代码 主要 是 负责 收集 用 户 的 注册 信息 一 > 

<! -- #include file = "top.asp" -一 > 

<table width = "500" bgcolor = "并 FFFFFF”border ="1”align = " center”cellpadding = "5" 
cellspacing= "0"> 

<tr> 

<td> 用 户 注册 

< form name = "forml" id= "forml" method= "post" action = "?action = reg" onSubmit = "return check()"> 
< table width= "480" border = "1" align = "center" cellpadding ="0" cellspacing = "0" cellingspace = "0"> 
tr 
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<tdwidth="98"> 用 户 名 : </td> 
<td width= "341">< input name="username" type = "text" id = "name" onBlur = "startCheck 
(this)">< span id= "UserResult"></span></td> 
</tr> 
RE 
<td> 密 码 : </td> 
<td>< input name = "password1l" type= "password" id= "password"></td> 
</tr> 
<tr> 
<td> 确 认 密 码 : </td> 
<td>< input name = "password2"” type = "password" id = "password"></td> 
</tr> 
tr> 
<td> 密 码 提示 问题 : </td> 
<td>< input name = "question" type= "text" id = "question"></td> 
</tr> 
<tr> 
< td> 密 码 提示 答案 : </td> 
<td><input name = "answer" type= "text" id = "answer"></td> 
</tr> 
tr> 
<tdcolspan= "2" align= "center">< input type = "submit” name = "submit” value = "注册 "> 
< input type = "reset" name = "submit" value= " 重 置 "></td> 
</tr></table></form> 
</td></tr></table> 
</BODY></HTML> 


注意 : 本 网 页 代码 中 设置 表单 的 onSubmit 为 onSubmit 一 "return check()", 该 验证 利 


用 JavaScript 的 check 函数 实现 对 表单 各 项 的 客户 端 验证 。 但 如 果 要 检测 用 户 想 注册 的 用 
户 名 是 否 已 经 被 注册 ,单纯 利用 客户 端 验证 是 无 法 实现 的 。 这 时 就 需要 利用 Ajax 技术 或 框 
架 , 本 例 中 利用 当前 广泛 运用 的 Ajax 框架 jQuery。 


(2) 下 载 jQuery 的 JS 函数 库 , 如 jQuery-132min2. js, 然后 通过 如 下 代码 导入 


jQuery 库 。 


< script language = "javascript" src = "js/jQuery- 132min2. js"></script> 


(3) 在 网 页 JavaScript 代码 中 添加 startCheck(oInput) 用 于 实现 Ajax 的 异步 调用 。 然 


后 修改 “用 户 名 "文本 框 二 input name 一 "username”type 一 "text" 二。 给 username 文本 框 
添加 onBlur 事件 (onBlur= "startCheck(this)") ,并 在 其 后 添加 一 span id 王 "UserResult" 二 
二/span 标 签 用 于 接收 异步 调用 的 反馈 信息 。startCheck(oInput) 函数 代码 如 下 所 示 。 


function startCheck(oInput){ 
// 首 先 判断 是 否 有 输入 ,没有 输入 直接 返回 ,并 提示 
if(!oInput. value){ 


oInput. focus(); // 聚 焦 到 “用 户 名 ”输入 框 
document. getElementById( "UserResult"). innerHTML = "用 户 名 不 能 为 空 !1"; 
return; 


oInput = $ .trim(oInput. value); // 使 用 jQuery 的 $ .trim() 方 法 过 滤 左 右 空格 
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var sUrl = "userExist.asp?username =" + oInput; 

SUrl = encodeURI( sUr1); // 使 用 encodeURI() 编 码 ,解决 中 文 乱码 问题 

$ ("#UserResult" ). load(sUrl, function(data){ 
$ ("#UserResult"). html(decodeURI(data) ) ; // 使 用 decodeURI( ) 解 码 
} 


} 
(4) 最 后 还 需要 制作 userExist. asp 页 面 ,用 于 检测 用 户 想 注册 的 用 户 名 是 否 已 经 被 注 


册 。userExist. asp 的 完整 代码 如 下 所 示 。 


<% (@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %> 
<! —— #include file= "conn.asp" -一 > 
< 
response. Charset = "gb2312" 
sql = "select * from users where username = '"&trim(Request. QueryString("username"))&"'" 
Set rs = conn. Execute( sql) 
if not rs. eof then 
Response. Write "对 不 起 ，"”& Request. QueryString("username") & " 已 经 存在 !" 
else 
Response. Write Request. QueryString( "username")&g" 目前 可 用 !" 
end if 
秽 > 


任务 6 MD5 加 密 算法 的 使 用 


任务 背景 

通常 为 了 安全 起 见 ,数据 表 中 的 用 户 密 码 需 要 以 密 文 形式 保存 ,这 样 即 使 有 人 拿 到 网 站 
的 数据 库 也 无 法 获得 用 户 密 码 , 目 前 加 密 通 常 使 用 MD5 加 密 算法 。 

任务 要 求 

(1) 用 MD5 加 密 算法 加 密 用 户 密码 。 

(2) 被 加 密 的 密 文 应 该 不 具有 可 逆 性 , 即 不 能 被 还 原 为 明文 。 

【技术 要 领 】 使 用 MD5 加 密 用 户 密码 。 

【解决 问题 】 人 敏感 数据 加 密 。 

【应 用 领域 】 数 据 加 密 。 

任务 分 析 

本 任务 较为 简单 ,需要 到 网 上 下 载 MD5 算法 的 ASP 文件 。 

重点 和 难点 

MD5 算法 的 应 用 。 

操作 步骤 

(1) 从 网 上 下 载 MD5 算法 的 ASP 文件 MD5. asp。 

(2) 编写 MD5 加 密 测试 文件 MD5test. asp ,内容 如 下 。 

<% @LANGUAGE = "VBSCRIPT" CODEPAGE = "65001" %> 


<! —— #include file= "MD5.asp" -一 > 
<% 
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Response. Write( "< br > zhangsan:") 

Response. Write(MD5( "zhangsan")) 

Response. Write("<br >12345678:") 

Response. Write(MD5("12345678") ) 
> 


(3) 在 浏览 器 中 运行 MD5test. asp 网 页 ,结果 如 图 10-11 所 示 。 


玉 。45 加 密 测 试 - Vindors Internet Explorer 
文件 ”编辑 EE) 查看 @) 收藏 上) 工具 CD) 帮助 人 0 


-日 国 国 的 Pr 闪 x @ 从 


雹 让 痢 http://1ocalhost/website_spp/chspterl0/1ogin/ndstest. asp 加 和 


zhangsan:01d7f40760960e7bd9443513f22ab9af 
123456:el0adc3949ba59abbe56e057f20f883e 
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图 10-11 MD5 加 密 测试 


从 图 10-11 可 以 看 出 ,MD5 算法 将 不 同 长 度 的 字符 串 加 密 为 由 32 位 的 十 六 进 制 数 组 
成 的 加 密 字 符 串 , 且 该 加 密 字 符 串 无 法 被 还 原 为 明文 ,这 样 就 保证 了 密码 的 安全 性 。 在 用 户 
注册 时 ,只 需要 将 表单 中 的 用 户 密码 利用 加 密 函 数 MD5( "字符 串 ”) 加 密 存 人 数据 库 即 可 ， 
而 在 用 户 登 录 时 ,只 需 将 登录 表单 中 的 用 户 密码 利用 加 密 函 数 MD5(" 字 符 串 ") 加 密 后 与 数 
据 库 中 已 经 加 密 密 码 对 比 即 可 知道 登录 密码 是 否 正确 。 


知识 点 拓展 


jQuery 由 美国 人 John Resig 创建 。 jQuery 是 继 Prototype 之 后 又 一 个 优秀 的 
JavaScript 框架 。 其 宗旨 是 一 一 Write Less,Do More, 即 写 更 少 的 代码 ,做 更 多 的 事情 。 它 
是 轻 量 级 的 JS 库 (压缩 后 只 有 21KB) ,这 是 其 他 的 JS 库 所 不 及 的 , 它 兼容 CSS 3 ,还 兼容 各 
种 浏览 器 (IE 6. 0 十 ,FF 1. 5 十 ,Safari 2. 0 十 ,Opera 9. 0 十 ) 。jQuery 是 一 个 快速 的 ,简洁 的 
JavaScript 库 ,使 用 户 能 更 方便 地 处 理 HTML documents .events, 实现 动画 效果 ,并 且 方 便 
地 为 网 站 提供 Ajax 交互 。jQuery 还 有 一 个 比较 大 的 优势 是 , 它 的 文档 说 明 很 全 ,而 且 各 种 
应 用 也 说 得 很 详细 ,同时 还 有 许多 成 熟 的 插件 可 供 选择 。jQuery 能 够 使 用 户 的 HTML 页 
保持 代码 和 HTML 内 容 分 离 , 也 就 是 说 ,不 用 再 在 HTML 里 面 插入 一 堆 JS 来 调用 命令 
了 ,只 需 定义 ID 即 可 。 


实 训 ”复杂 表单 的 验证 


实 训 目的 


通过 上 机 编程 ,让 学 生理 解 表单 验证 的 基本 思想 ,掌握 JavaScript 编程 实现 表单 验证 的 
基本 方法 、 步 又 和 思路 。 
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实 训 内 容 
制作 一 个 较为 复杂 的 表单 ,用 JavaScript 实现 表单 相关 验证 。 
实 训 过 程 


制作 网 页 userReg. html, 在 网 页 中 插入 表单 ,并 在 一 head 之 二 /head 二 标签 中 加 入 
JavaScript 验证 代码 。 最 后 在 表单 form 的 onsubmit 事件 中 添加 相应 的 表单 验证 函数 。 网 
页 完整 代码 如 下 所 示 。 


< html > 

<head> 

<meta http - equiv= "Content — Type" content = "text/html; charset = utf — 8" /> 
<title > 用户 注册 表单 验证 </title> 
</head> 

< style type= "text/css"> 

> 

:red { 

color: #F00; 

} 

-一 > 
</style> 
</head> 
< script language = "javascript"> 
function initSelector() 


var selector = document. getElementById( "year"); // 获 取 列 表 框 对 象 , 其 id 为 "year" 
var 七 = document. createElement("option" ); // 创 建 一 个 列表 值 的 option 标签 对 象 
t,text =" -请 选择 -一 "; // 设 置 该 标签 的 text 属性 为 i 
try// 通 过 异常 处 理 来 匹配 各 种 浏览 器 
{ 

selector.add(t, nul11); // 将 列表 值 对 象 加 入 列表 框 对 象 (标准 调用 形式 ) 
} 
catch(ex) 
{ 

selector.add(t); // 将 列表 值 对 象 加 入 列表 框 对 象 (IE 调用 形式 ) 


} 
for(var i=1900;i<=2100;i++) 
var t = document. createElement ("option" ); // 创 建 一 个 列表 值 的 option 标签 对 象 


t. text = i; // 设 置 该 标签 的 text 属性 为 i 

try // 通 过 异常 处 理 来 匹配 各 种 浏览 器 

selector. add(t, nul1) 7 // 将 列表 值 对 象 加 入 列表 框 对 象 (标准 调用 形式 ) 
a 

selector.add(t); // 将 列表 值 对 象 加 入 列表 框 对 象 (IE 调用 形式 ) 


} 


} 


function isEmpty(text) 


{ 


} 


if(text =="") 
return true; 
else 
return false; 


function isEqual(text1l,text2) 


{ 


} 


if(textl == text2) 
return true; 
else 
return false; 


function check() 


' 


var f = document. getElementById("forml"); 
if(isEmpty(f. username. value)) 
{ 
alert(" 用 户 名 必须 填写 !!"); 
f. username. focus( ); 
return false; 
} 
if(isEmpty(f. passwordl1. value)) 
{ 
alert(" 密 码 不 能 为 空 !1"); 
f.passwordl. focus(); 
return false; 
} 
if(isEmpty(f.password2. value)) 
{ 
alert(" 重 复 密码 不 能 为 空 !1"); 
上 . password2. focus(); 
return false; 


} 


if(!isEqual(f.passwordl. value, f. password2. value)) 


{ 
alert(" 密 码 与 重复 密码 必须 相同 !1"); 
f.password1. focus(); 
return false; 
if(!f. sex_ nan. checkedg&&!f. sex_nv. checked) 
{ 
alert(" 性 别 必须 选中 "); 
return false; 
} 
if(f. year. selectedIndex == 0) 
{ 
alert(" 请 选择 出 生年 份 "); 


f. year. focus(); 
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// 判 断 字符 串 是 否 为 空 


// 判 断 两 字符 串 是 否 相同 


// 获 取 表 单 对 象 
// 验 证 用 户 名 是 否 为 空 


// 验 证 密码 是 否 为 空 


// 验 证 重复 密码 是 否 为 空 


// 验 证 两 次 密码 是 否 相同 


// 验 证 是 否 选 中 性 别 中 的 一 项 


// 验 证 是 否 选中 了 出 生年 月 项 
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室 


return false; 
} 
// 验 证 是 否 选 择 了 至 少 一 项 爱好 
if(!(f.ah tiyu.checked || f.ah yinyue.checked | f.ah meishu. checked || f.ah qita. checked)) 
{ 
alert(" 至 少 选择 一 个 爱好 项 "); 


return false; 


} 

var filename = f. picture. value; // 取 得 选中 的 上 传 照片 文件 路 径 字符 串 
var extend = filename. substring(filename. lastIndexof(".") + 1);// 取 得 文件 扩展 名 
extend. toLowerCase( ); // 将 扩展 名 转化 为 小 写 


// 如 果 选择 了 文件 , 验证 扩展 名 是 否 为 jpg、jpeg、gif、png 中 的 一 个 
if(!isEmpty(filename) &&extend! = "jpg" &&extend! = "jpeg" &Sextend! = "gif"g&&extend! = "png") 
. 
alert(" 上 传 的 图 片 文件 格式 不 支持 !1"); 
return false; 
} 
// 如 果 输 入 了 其 他 说 明 , 验 证 其 长 度 是 否 大 于 20 个 字符 
if(!isEmpty(f. detail. value)&&f. detail. value. length<= 20) 
{ 
alert(" 描 述 不 得 少 于 20 个 字符 !11" ) ; 
return false; 
} 
return true; 
} 
</script > 
<body onload= "initSelector()"> 
< form action = "http://www. baidu. com" method = "get" enctype = "multipart/form— data" name = 
"forml" id= "forml" onsubmit = "return check( )"> 
<table width= "600" border = "1" cellspacing= "0" cellpadding = "0"> 
<tr> 
<td colspan = "2" align = "center" valign = "middle"><h3 > 用 户 注册 </h3 ></td> 
</tr> 
<tr> 
<td width= "150" align = "right"> 用 户 名 : </td> 
<td width= "444" class = "red">< input type = "text" name = "username" id= "username" /> 
*</td> 
</tr> 
<tr> 
<td align = "right"> 密 码 : </td> 
<td>< input type = "password" name = "passwordl" id= "password1" /> 
<span class = "red">* </span></td> 
</tr> 
<tr> 
<td align= "right"> 密 码 确 认 : </td> 
<td>< input type = "password" name = "password2" id = "password2" /> 
< span class = "red">* </span></td> 
</tr> 
<tr> 
<td align = "right"> 性 别 : </td> 
<td>< input type= "radio" name = "sex" id= "sex nan" value= "radio" /> 
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男 
< input type = "radio" name = "sex" id = "sex nv" value= "radio2" /> 
女 < span class = "red">*</span></td> 
</tr> 
ES 
<td align = "right"> 出 生年 份 : </td> 
<td>< select id= "year" name = "select" > 
</select > 
< span class = "red">* </span></td> 
</tr> 
<tr> 
< td align = "right"> 兴 趣 爱 好 : </td> 
<td>< input type = "checkbox" name = "ah tiyu" id = "ah tiyu" /> 


体育 

< input type = "checkbox" name = "ah yinyue" id = "ah yinyue" /> 
音乐 
< input type = "checkbox" name = "ah meishu" id = "ah meishu" /> 
美术 


< input type = "checkbox" name = "ah qita" id = "ah qita”" /> 
其 他 < span class = "red"> * </span ></td> 
</tr> 
<tr> 
<td align = "right"> 上 传 照片 : </td> 
<td>< input type= "file" name= "picture" id= "picture" /></td> 
</tr> 
<tr> 
<td align = "right"> 其 他 说 明 : </td> 
<td>< textarea name = "detail” id = "detail" cols = "45" rows = "8"></textarea></td> 
</tr> 
tr 
<td> gnbsp;</td> 
<td>< input type = "submit" name = "button” id = "button" value = "提交 " /> 
<label> 
< input type = "button" name = "button2" id= "button2" value= "按钮 " onclick = "check()"/> 
</label ></td> 
</tr> 
</table> 
</form> 
</body > 
</html > 
</html > 


网 页 运行 结果 如 图 10-12 所 示 。 
实 训 总 结 


本 实 训 主要 目的 是 让 学 生 掌 握 利用 JavaScript 进行 客户 端的 表单 验证 。 让 学 生 能 综合 
运用 本 章 所 学 的 知识 制作 一 个 较为 复杂 的 表单 验证 。 
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图 10-12 ”用户 注册 表单 验证 


综合 任务 


1. 创建 一 个 简单 的 用 户 表 ,只 需 有 用 户 id、 用 户 名 和 密码 三 个 字段 即 可 ,编写 一 个 简单 
的 用 户 注册 程序 。 

2. 创建 一 个 类 似 任务 1 中 的 简单 用 户 表 ,编写 一 个 简单 的 用 户 登录 程序 。 

3. 利用 JavaScript 和 jQuery 程序 实现 对 任务 2 的 注册 表单 和 任务 3 的 登录 表单 验证 。 


商品 发 布 


在 电子 商务 网 站 中 ,商品 发 布 是 最 基本 的 功能 。 网 站 中 显示 的 商品 信息 首先 需要 在 网 
站 后 台 发 布 , 商 品 信息 作为 电子 商务 网 站 的 一 个 组 成 元 素 , 需 要 进行 有 效 的 管理 。 本 模块 主 
要 以 实例 的 形式 讲述 商品 信息 的 添加 、 修 改 和 删除 等 功能 。 

能 力 目标 

1. 能 使 用 For… Next 循环 和 Do While…Loop 循环 

2. 能 在 页 面 中 嵌入 HTML 在 线 编辑 器 

3. 能 熟练 使 用 记录 集 的 分 页 功能 

知识 目标 

1. Confirm() 函 数 的 用 法 

2. 插入 \ 查 询 和 删除 等 SQL 语句 的 书写 

3. 记录 集 的 Update 方法 


模拟 制作 任务 


任务 1 浏览 商品 信息 


任务 背景 

商品 信息 浏览 页 面 是 商品 信息 管理 的 基本 功能 ,管理 员 只 有 通过 浏览 商品 信息 才能 发 
现 某 些 商品 信息 的 输入 错误 ,然后 进行 相应 的 修改 或 删除 操作 。 

任务 要 求 

(1) 商品 信息 一 般 比较 多 ,所 以 应 该 能 分 页 浏览 。 

(2) 商品 信息 浏览 页 面 应 该 提供 搜索 功能 。 

【技术 要 领 】 使 用 记录 集 rs 的 pagesize 属性 设置 每 页 显示 的 记录 数 ; 使 用 For…Next 
循环 逐一 显示 每 页 中 的 记录 ; 利用 超 链接 附加 页 码 参 数 实现 翻 页 功能 。 

【解决 问题 】 记 录 的 分 页 显示 和 查询 。 

【应 用 领域 】 数 据 显 示 。 

效果 图 

商品 信息 浏览 的 界面 如 图 11-1 所 示 。 

任务 分 析 

商品 信息 浏览 需要 访问 数据 表 , 通 过 循环 遍历 数据 表 中 的 所 有 数据 ,然后 将 这 些 数据 显 
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图 11-1 商品 信息 浏览 界面 


示 出 来 。 如 果 数 据 比较 多 时 则 需要 分 页 ,通常 是 使 用 记录 集 的 pagesize 属性 设置 每 页 显示 
的 记录 数 , 然 后 使 用 For…Next 循环 逐一 显示 每 页 中 的 记录 。 最 后 利用 超 链 接 附加 页 码 参 
数 实现 翻 页 功能 。 

重点 和 难点 

(1) For… Next 循环 的 使 用 。 

(2) 翻 页 功能 的 实现 。 

操作 步骤 

(1) 创建 Goods. asp 页 面 , 在 网 页 中 输入 如 下 代码 。 


<html > 
<head > 

<title > 商品 管理 </title> 
</head> 
< script language = javascript > 
function SureDel (GoodID) 
{ 

证 ( confirm(" 你 是 否 真 地 要 删除 该 商品 ?")) 
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window. location. href = "GoodDelete.asp?GoodID=" + GoodID+ ""; 


} 
</script > 
<body> 
商品 管理 
<hr> 
<table border =0 cellpadding = "0"> 
中 
<td> 库 存 商品 浏览 页 面 </td> 
</tr> 
<tr> 
<tdalign= "right"> 
< -- 以 下 表单 Forn 实现 商品 信息 搜索 
< form action = "result.asp" method= "post" name = "forml" target =" self"> 
查询 项 : 
< select name = "searchitem"> 
< option value = "GoodName"” selected = true> 商 品名 称 </option > 
< option value = "Category"> 商 品类 别 </option> 
< option value = "Description"> 商 品 描述 </option > 
</select > 
关键 词 : 
< input type = "text" size= "10" name = "searchvalue"> 
< input type = "submit”name = "submit” value = "查询 "> 
</form> 
< -- ”表单 结束 --> 
</td> 
</tr> 
<tr> 
<td align = "right"><a href = "GoodAddform.asp"> 添 加 商品 </a></td> 
</tr> 
<tr><td> 
<table border =1 cellspacing= 1> 
<tr> 
<td> 商 品 编号 </td><td> 商 品名 称 </td><td> 商 品类 别 </td> 
<td> 价 格 </td>< td> 库 存 </td>< td> 商 品 图 片 </td>< td> 商 品 描述 </td><td> 操 作 </td> 
</tr> 
<! -- #include file= "conn.asp" --—> 
<% 


Set rs = Server.CreateObject("ADODB. Recordset") 

rs. ActiveConnection = Conn 

rs. Open "select * from Goods order by GoodID" ,conn,1,1 
rs. pagesize=3 ' 设 置 每 页 记录 数 为 3 

' 如 果 网 页 参数 page 为 空 ,默认 显示 第 1 页 

if request("page") = "" then 


curpage = 1 
else 

curpage = cint(request("page")) 
end if 


' 在 当前 页 码 乘 以 每 页 记录 数 大 于 总 记录 数 时 ,正确 设 定 当前 页 码 值 
if curpage * rs. pagesize > rs. RecordCount then 
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if rs. RecordCount mod rs. pagesize= 0 then 
curpage = rs. RecordCount\rs. pagesize 
else 
curpage = (rs. RecordCount\rs. pagesize) +1 
end if 
end if 
' 设 置 记录 集 的 当前 页 码 
rs.absolutepage = curpage 
' 循 环 输出 当前 页 码 中 的 记录 
fori = 1 tors.pagesize 
先 > 
<tr> 
<td><% = rs("GoodID") %$></td><td><$ =rs("GoodName" ) %></td> 
<td><% = rs("Category") %$></td><td><% =rs("Price") %></td> 
<td><% =rs("Quantity") %></td><td>< img src= "<% =rs("Goodpic") %>"></td> 
<td><% =rs("Description") %></td> 
<td><a href = "GoodEditform. asp?GoodID= < = rs("GoodID" ) %>"> 修 改 </a> 
|<a href = 'javascript: SureDel(<% = rs("GoodID" ) %>)"> 删 除 </a></td> 
</tr> 


< 和 
rs. movenext 
"如 果 到 达 记 录 集 的 末端 , 则 退出 For 循环 
if rs. eof then 
由本 生计 法 
exit for 
end if 
next 
%> 
</table> 
</td> 
</tr> 
</table> 
< form actiol Goods.asp" target =" self"> 
<hr size =0 width= '100% "> 
第 < font color = red><% = cstr(curpage) %></font> 页 / 
共 < font color = red><% = cstr(rs. pagecount) % ></font > 页 &nbsp; &nbsp; 
本 页 <font color = red><g% =cstr(i-1) 名 ></font > 条 / 
共 < font color = red><% = cstr(rs. recordcount) %></font > 条 
< 
if curpage = 1 then 
%> 
< 和 
else 
%> 
[<a href = "Goods.asp?page = 1"> 首 页 </a>] 
[<a href = "Goods.asp?page =<% = cstr(curpage 一 1) %>"> 前 页 </a>] 
< 和 
end if 
if curpage = rs.pagecount then 
先 > 
< 
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else 
先 > 
[<a href = "Goods.asp?page =<% =cstr(curpage+1)%>"> 后 页 </a>] 
[<a href = "Goods.asp?page =<% = cstr(rs. pagecount) %>"> 末 页 </a>] 
<% 
end if 
先 > 
<label> 
< input name = "page" type= "text" id= "page" size= "4"> 
< input type = "submit" name = "Submit" value = " 跳 转 "> 
</label > 
< 各 
set rs = nothing 
set conn = nothing 
第 > 
</form> 
</body> 
</html > 


(2) 在 浏览 器 中 预览 的 效果 如 图 11-1 所 示 。 

代码 说 明 : 

(1) 语句 rs. pagesize 二 3 设置 每 页 显示 的 记录 数 为 三 条 ,语句 rs. absolutepage 一 
curpage 设置 记录 集 的 当前 页 码 为 curpage 的 值 。 

(2) curpage 的 值 由 超 链接 后 的 page 参数 指定 ,如 以 下 几 个 超 链接 所 示 。 

[<a href = "Goods.asp?page = 1"> 首 页 </a>] 

[<a href = "Goods.asp?page =<% = cstr(curpage - 1) % >"> 前 页 </a>] 

[<a href = "Goods.asp?page =<% = cstr(curpage + 1) %>"> 后 页 </a>] 

[<a href = "Goods.asp?page =<% = cstr(rs. pagecount) % >"> 未 页 </a>] 

(3) page 参数 也 可 以 手动 输入 ,然后 单 击 “ 跳 转 ” 按 钮 跳 转 到 相应 的 页 面 。 代 码 如 下 
所 示 。 

< input name = "page" type= "text" id = "page" size= "4"> 

< input type = "submit" name = "Submit” value = " 跳 转 "> 

(4)“ 删 除 ” 超 链接 二 a href 二 'javascript:SureDel( 一 %=rs(C"GoodID") 站 之 ) "全 删除 
二 /a 二 调用 JavaScript 困 数 SureDel(GoodID) ,该 函数 的 作用 是 提示 管理 员 确 认 删 除 操作 。 
当 管 理 员 确认 删除 操作 后 才 跳 转 到 GoodDelete. asp 页 面 实现 真正 的 删除 操作 。 


任务 2 查询 商品 信息 


任务 背景 

当 商 品 信息 较 多 时 ,通常 需要 提供 查询 功能 ,以 提供 用 户 更 精确 的 浏览 。 
任务 要 求 

应 该 允许 用 户 选 择 不 同 的 字段 进行 查询 ,实现 的 查询 主要 是 模糊 查询 。 
【技术 要 领 】 查 询 商品 信息 SQL 语句 中 Where 子 句 的 书写 。 

【解决 问题 】 实 现 根 据 商 品名 称 、 类 别 或 描述 来 模糊 查询 商品 信息 。 
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【应 用 领域 】 记 录 查 询 。 

效果 图 

在 图 11-1 中 “查询 项 ”下 拉 菜 单 中 选择 相应 的 查询 项 ,在 “关键 词 "文本 框 中 输入 相应 的 
关键 词 ,然后 单 击 “ 查 询 ” 按 钮 ,查询 的 效果 图 如 图 11-2 所 示 。 


ET 
Be- 日 昌国 的 记 p 

EI Te 

下 于 李 Dee 


图 11-2 商品 查询 效果 图 


任务 分 析 

本 任务 首先 需要 在 Goods. asp 页 面 制作 一 个 查询 表单 ,将 查询 项 和 查询 关键 字 参 数 传 
递 到 result. asp 页 面 。 然 后 将 这 些 参数 加 入 查询 SQL 语句 中 的 Where 子 句 ,这 样 查询 出 来 
的 结果 即 为 满足 要 求 的 记录 集 。 

重点 和 难点 

查询 SQL 语句 中 的 Where 子 句 书写 。 

操作 步骤 

(1) 创建 result asp 页 面 , 在 网 页 中 输入 如 下 代码 。 


< html > 
< head> 

<title> 商 品 查询 </title> 
</head> 
< script language = javascript > 
function SureDel (GoodID) 
{ 
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证 ( confirm(" 你 是 否 真 地 要 删除 该 商品 ?")) 
{ 
window. location. href = "GoodDelete.asp?GoodID=" + GoodID+ ""; 


} 
</script > 
<body> 
商品 查询 结果 
<hr> 
< table border = 0 cellpadding = "0"> 
tty 

<td> 查 询 结果 页 面 ,<a href = "Goods.asp"> 返 回 商品 浏览 页 面 </a></td> 
</tr> 
<tr><td> 
<table border =1 cellspacing = 1> 

<tr> 

< td> 商 品 编号 </td>< td> 商 品名 称 </td>< td> 商 品类 别 </td> 
< td> 价 格 </td>< td> 库 存 </td>< td> 商 品 图 片 </td>< td> 商 品 描述 </td><td> 操 作 </td> 

</tr> 
<! -- #include file = "conn.asp" 一 一 > 
<% 
Set rs = Server. CreateObject ("ADODB. Recordset") 
rs. ActiveConnection = Conn 
Searchitem = Request. Form( "searchitem") 
searchvalue = Trim(Request. Form( "searchvalue" )) 
strSQL= "select * from Goods where " 
StrSQL = strSQl&searchitem&" like '% "&searchvalue&"$% '" 
rs. Open strSQL 
do while not rs. EOF 
> 
<tr><td><% = rs("GoodID") %></td><td><% =rs("GoodName") %></td> 
<td><% = rs("Category") %$></td><td><% =rs("Price") %></td> 
<td><% =rs("Quantity") %$></td><td>< img src= "<% =rs("Goodpic") %>"></td> 
<td><% = rs("Description") %></td><td> 
<a hrel GoodEditform.asp?GoodID =<% = rs("GoodID") 名 >"> 修 改 </a>| 
<a href = 'javascript:SureDel(<% = rs("GoodID") $>) > 删除 </a> </td></tr> 
<% 

rs. MoveNext 
loop 

先 > 
</table> 
</td> 
</tr> 
</table> 
</body> 
</html > 


(2) 在 浏览 器 中 的 查询 效果 如 图 11-2 所 示 。 


代码 说 明 : 
(1) 代码 中 查询 SQL 语句 的 写法 如 下 。 
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StrSOL = "select * from Goods where " 

strSQL = strSQl&searchitemg" like '%"&searchvalue&g"% '" 

这 里 实现 的 是 模糊 查询 ,所 以 查询 SQL 语句 采用 了 “select * from Goods where 查询 
项 like 查询 值 ”, 注 意 查询 值 的 两 边 应 该 加 上 *%” 和 *'”。 

(2) 代码 中 循环 输出 查询 结果 采用 Do While …Loop 循环 ,循环 结构 如 下 。 


Do While not rs. EOF 
一 循环 代码 


TS.MoveNext 
Loop 


任务 3 利用 Web 在 线 编辑 器 添加 商品 


任务 背景 

添加 商品 是 商品 发 布 模块 的 最 基本 功能 ,商品 信息 浏览 页 面 中 显示 的 商品 首先 要 通过 
添加 商品 功能 添加 进去 。 

任务 要 求 

(1) 添加 商品 时 应 该 能 实现 对 商品 图 片 的 上 传 。 

(2) 商品 描述 中 应 该 能 实现 插入 图 片 等 多 媒体 信息 。 

【技术 要 领 】 图片 无 组 件 上 传 ; 做 入 HTML 在 线 编辑 器 ; ADO 添加 数据 。 

【解决 问题 】 商 品 图 片上 传 和 显示 ; HTML 在 线 编辑 器 的 使 用 ; 添加 数据 到 服务 器 。 

【应 用 领域 】 网 页 表单 提交 数据 。 

效果 图 

商品 添加 操作 界面 如 图 11-3 所 示 。 

任务 分 析 

这 个 任务 主要 有 两 个 : 一 是 商品 照片 的 无 组 件 上 传 和 显示 ; 二 是 将 HTML 在 线 编辑 
器 艇 和 在 页 面 中 ,从 而 实现 商品 描述 信息 的 在 线 编辑 。 

重点 和 难点 

商品 照片 无 组 件 上 传 和 嵌入 HTML 在 线 编辑 器 。 

操作 步骤 

(1) 新 建 GoodAddForm. asp 页 面 , 在 页 面 中 输入 如 下 代码 。 


<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %> 
<html> 
<head> 
<title > 添加 商品 </title> 
</head> 
<body> 
添加 一 个 商品 
<hr> 
< form action = "GoodAdd. asp?action = add" method = post name = "myform"> 
<table border = 0 cellspacing=0> 
<tr> 
<td> 商 品 编号 : </td> 
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图 11-3 商品 添加 操作 界面 


<td>< input name = "GoodID" type = "text" id = "GoodID" size="20"></td></tr> 
<tr><td> 商 品名 称 : </td> 
<td>< input name = "GoodName" type = "text" id = "GoodName" size = "20"></td></tr> 
<tr> 
<td> 商 品类 别 : </td> 
<td>< label > 
< select name = "Category" id= "Category"> 
< option value = "数码 "> 数码 </option > 
< option value = "家 电 "> 家 电 </option > 
< option value= "日 化 "> 日 化 </option> 
< option value = "餐饮 "> 餐饮 </option> 
< option value = "其 他 "> 其 他 </option> 
</select> 
</label ></td> 
</tr> 
<tr> 
<td> 价 格 : </td> 
<td>< input name = "Price" type = "text" id= "Price" size="20"></td></tr> 
<tr> 
<td> 库 存 : </td> 
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全 
<td>< input name = "Quantity" type= "text" id = "Quantity" size= "20"></td></tr> 
Er 
<td> 商 品 照片 : </td> 
<td>< input name = "bookpic" type = "text" id= "bookpic" size = "20"> gnbsp; 
< input type = "button" name = "Submit2" value = "上传 文件 " 
‘onClick = "window. open( 'upfile.asp', '', 'status = no, scrollbars = no, top = 20, left = 110, width= 
420, height =165')" /></td> 
</tr> 
<tr> 
<td> 描 述 : </td> 
<td> 
< input name = "Description" type = "hidden" id = "Description" value = ""> 
< IFRAME ID = "Description" SRC = "editubb/eWebEditor. asp? id = Descriptiongstyle = standard" 
FRAMEBORDER = "0" SCROLLING = "no" WIDTH = "550" HEIGHT = "250"></IFRAME > 
</td></tr> 
<tr><td colspan= "2" align= "center"> 
< input type = submit value = "添加 商品 "> 
< input type = "reset" name = "Submit" value = " 重 填 "> 
</td></tr> 
</table> 
</form> 
</body> 
</html > 


(2) 新 建 GoodAdd. asp 页 面 ,在 页 面 中 输入 如 下 代码 。 


<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %> 
<title > 添加 商品 </title > 

<! -- #include file = "conn.asp" -一 > 

<% 

GoodID = Request. Form( "GoodID") 

GoodName = Request. Form( "GoodName" ) 
Category = Request. Form( "Category") 
Price= cint(Request. Form("Price")) 
Quantity = cint(Request. Form( "Quantity")) 
Goodpic = trim( Request. Form( "bookpic") ) 
Descriptionstr = Request. Form("Description") 
strSQL = "insert into Goods values(" 
strSQL = strSQ1&" '"&GoodIDg"'," 

strSQL = strSQl&" '"&GoodNameg&"'," 

strSQL = strSQ1&" '"&Category&"'," 

strSQL = strSQlg&Priceg"," 

strSQL= strSQlg&Quantity&"," 

strSQL = strSQ1&"'"&Goodpic&"'," 

strSQL = strSQ1&" '"g&Descriptionstrg"')" 
Conn. Execute strSQL 

Conn. Close 

Set Conn = nothing 

Response. Redirect( "Goods.asp") 

多 > 
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(3) 程序 的 运行 结果 如 图 11-3 所 示 。 
代码 说 明 : 
(1) 本 模块 将 商品 照片 上 传 到 服务 器 相应 目录 ,数据 库 中 只 存储 图 片 路 径 , 显 示 时 提取 
图 片 路 径 即 可 ,上 传 功能 由 任务 6 中 的 无 组 件 上 传 模块 实现 。 
(2) HTML 在 线 编辑 器 的 代码 如 下 所 示 。 


< input name = "Description" type = "hidden" id= "Description" value= ""> 
< IFRAME ID = "Description" SRC = "editubb/eWebEditor.asp?id= Description&style = standard" 
FRAMEBORDER = "0" SCROLLING = "no" WIDTH = "550" HEIGHT = "250"></IFRAME > 
eWebEditor 为 HTML 在 线 编辑 模块 ,可 到 http://www. ewebeditor. net/ 网 站 下 载 
ASP 试用 版 使 用 。 注 意 第 一 行 是 一 个 隐藏 域 ,其 type 属性 为 “hidden”。 
(3) GoodAdd. asp 页 面 实 现 商 品 信息 的 添加 ,添加 完毕 后 跳 转 到 Goods. asp 页 面 。 


任务 4 利用 Web 在 线 编辑 器 修改 商品 


任务 背景 

商品 添加 功能 实现 后 ,管理 员 就 可 以 添加 商品 信息 了 ,但 如 果 当 某 一 商品 信息 有 错误 
时 ,这 时 就 需要 一 个 商品 修改 页 面 来 修改 商品 信息 。 

任务 要 求 

(1) 商品 修改 页 面 应 该 能 实现 包括 商品 照片 在 内 的 所 有 商品 信息 的 修改 。 

(2) 对 商品 描述 信息 的 修改 仍然 可 以 利用 HTML 在 线 编辑 器 。 

【技术 要 领 】ADO 数据 添加 ; HTML 在 线 编辑 器 编辑 商品 描述 信息 。 

【解决 问题 】 商 品 信息 显示 和 修改 。 

【应 用 领域 】 网 页 表单 数据 修改 。 

效果 图 

单 击 图 11-1 中 商品 编号 为 “12 的 记录 的 “修改 " 超 链 接 ,编辑 该 商品 信息 ,效果 如 图 11-4 
所 示 。 

任务 分 析 

本 任务 首先 要 通过 商品 编号 从 数据 库 中 提取 相应 的 商品 信息 显示 出 来 ,管理 员 修改 后 
再 提交 数据 库 即 可 。 

重点 和 难点 

HTML 在 线 编辑 器 编辑 商品 描述 信息 。 

操作 步骤 

(1) 新 建 GoodEditform. asp 页 面 ,详细 代码 如 下 。 


<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %> 
<html> 

<head><title > 修改 商品 </title></head> 
<body> 

修改 商品 信息 

<hr> 

<!—— #include file= "conn.asp” 一 一 > 

<% 
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图 11-4 编辑 商品 信息 界面 


editid = Request. Querystring("GoodID") 
Set rs = Server. CreateObject ("ADODB. Recordset") 
rs. ActiveConnection = Conn 
rs.Open"select * from Goods where GoodID = '"&editidg"'" 
if rs. state= 1 then 
%> 
< form action = "GoodEdit.asp" method= post name = "myform"> 
<table border =0 cellspacing= 0> 
<tr> 
<td> 商 品 编号 : </td> 
<td>< input type = "text" size="20" name= "GoodID" value =<% =rs("GoodID") %> readonly= 
true> 
</td> 
</tr> 
<tr> 
<td> 商 品名 称 : </td> 
<td>< input type = "text" size = "20" name = "GoodName" value =<% = rs("GoodName") $>> 
</td> 
</tr> 
<tr> 
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<td> 类 别 : </td> 
<td>< input type = "text" size = "20" name = "Category" value =<$% =rs("Category") %>> 
</td> 
</tr> 
<tr> 
<td> 价 格 : </td> 
<td>< input type = "text" size= "20" name = "Price" value =<% =rs("Price") %>> 
</td> 
</tr> 
<tr> 
<td> 库 存 : </td> 
<td>< input type = "text" size= "20" name = "Quantity" value =<% = rs("Ouantity" ) %>> 
</td> 
</tr> 
<tr> 
<td> 商 品 照片 : </td> 
<td>< input name = "bookpic" type = "text" id= "bookpic" size= "20" 
value= "<% =rs("Goodpic") %>"> 
< input type = "button" name = "Submit2" value = "上 传 文件 " 
‘onClick = "window. open( 'upfile.asp', '', 'status = no, scrollbars = no, top = 20, left = 110, width = 
420, height = 165')" /> 
</td></tr> 
<tr> 
<td> 描 述 : </td> 
<td> 
< textarea name = "Description" cols = "50" rows = "20" 
style = "display:none;"><% = rs("Description") %$ ></textarea> 
< IFRAME ID = "Description" 
src = "editubb/eWebEditor.asp?id = Description&style = standard" frameborder = "0" 
scrolling= "no" width = "650" height = "250"></IFRAME> 
</td> 
</tr> 
<tr><td colspan = "2" align = "center">< input type = submit value = "修改 "></td></tr> 
</table> 
</form> 
</body> 
< 多 
end if 
rs.close 


Set rs = nothing 
Conn. close 

Set Conn = nothing 
> 

</html > 


(2) 新 建 GoodEdit. asp 页 面 ,详细 代码 如 下 。 


<%@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %$> 
<title > 修改 商品 </title> 

<!—— #include file= "conn.asp" -一 > 

<% 
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写 


GoodID = Request. Form( "GoodID") 

GoodName = Request. Form( "GoodName") 

Category = Request. Form( "Category") 

Price = cint(Request. Form("Price")) 

Quantity = cint(Request. Form( "Quantity")) 
Goodpic = trim( Request. Form( "bookpic")) 
Descriptionstr = Request. Form("Description") 
set rs = Server. CreateObject ("ADODB. RecordSet") 
"修改 记录 

StrSQL = "select x from Goods where GoodID = '"&GoodIDg"'" 
rs. open strSQL, conn, 1,3 

rs("GoodName" ) = GoodName 

rs("Category") = Category 

rs("Price") = Price 

rs("Quantity") = Quantity 

rs("Goodpic") = Goodpic 

rs("Description") =Descriptionstr 

rs. updatel’] 

Conn. Execute strSQL 

Conn. Close 

Set Conn = nothing 

Response. Redirect( "Goods.asp") 

第 > 


(3) 商品 修改 页 面 运行 效果 如 图 11-4 所 示 。 
代码 说 明 : 

(1) 商品 照片 修改 部 分 的 代码 同 商品 添加 页 面 。 
(2) HTML 在 线 编辑 器 的 代码 如 下 所 示 。 


< textarea name = "Description" cols = "50" rows = "20" 
style= "display:none;"><% = rs("Description") %></textarea> 

< IFRAME ID= "Description" 
src = "editubb/eWebEditor. asp?id = Description&style = standard" frameborder = "0" 
scrolling = "no" width = "650" height = "250"></IFRRME > 


注意 修改 记录 时 ,第 一 行 是 一 个 多 行文 本 框 (标签 为 textarea) ,而 非 一 个 隐藏 域 。 但 应 


在 其 style 属性 中 设置 样式 规则 display 为 “none”, 这 样 可 以 隐藏 多 行文 本 框 , 只 显示 
HTML 在 线 编辑 器 。 


若 采 用 如 下 隐藏 域 的 形式 显示 商品 描述 信息 ,在 该 字段 包含 多 媒体 内 容 时 会 出 现 显示 


问题 。 例 如 当 字 段 中 包含 图 像 (CIMG 标签 ) 时 ,要 编辑 的 图 像 不 能 正确 地 显示 到 在 线 编辑 器 
中 ,因此 就 无 法 正确 修改 该 字段 的 值 。 


< input name = "Description" type = "hidden" 
id= "Description" value = "<% = rs("Description") 当 >"> 
< IFRAME ID= "Description" 
src = "editubb/eWebEditor. asp?id = Description&style = standard" frameborder = "0" 
scrolling = "no" width = "650" height ="250"></IFRAME> 


(3) GoodEdit. asp 页 面 实现 商品 信息 的 修改 ,修改 完毕 后 跳 转 到 Goods. asp 页 面 。 
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任务 5 删除 商品 信息 

任务 背景 

如 果 某 些 商 品 不 再 需要 , 即 可 删除 这 些 商 品 信息 。 

任务 要 求 

本 功能 应 该 能 根据 商品 编号 删除 商品 。 

【技术 要 领 】 删除 SQL 语句 的 编写 。 

【解决 问题 】 商 品 信息 的 删除 。 

【应 用 领域 】 数 据 删除 。 

效果 图 

当 单 击 图 11-1 中 的 “删除 ”链接 时 ,会 弹出 如 图 11-5 所 示 的 删除 确认 对 话 框 。 当 管理 
员 单 击 * 确 定 "按钮 时 才 真正 删除 商品 ,否则 不 删除 。 

任务 分 析 

本 任务 比较 简单 ,只 需要 制作 一 个 简单 的 删除 页 面 即 可 。 

重点 和 难点 

删除 SQL 语句 的 书写 。 

操作 步骤 

(1) 制作 GoodDelete. asp 页 面 , 详 细 代 码 如 下 。 


ft Internet Erplorer X 


/他 是 下 地 要 抽 队 法 商 品 ? 


图 11-5 删除 商品 确认 


<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %$> 
<title > 删除 商品 </title> 
<L -- #include file= "conn.asp" --> 
<% 
deleteid = Request. QueryString("GoodID") 
strSQL = "delete from Goods where GoodID = '"&deleteidg"'" 
Conn. Execute strSQL 
Conn. Close 
Set Conn = nothing 
Response. Redirect( "Goods.asp") 
%> 


(2) 删除 商品 后 返回 Goods. asp 页 面 。 
任务 6 实现 无 组 件 中 上 传 商品 图 片 


任务 背景 

用 户 在 浏览 商品 时 ,通常 需要 显示 商品 的 缩 略图 ,以 便 用 户 对 商品 有 一 个 大 致 的 了 解 。 
任务 要 求 

本 功能 先 将 商品 图 片上 传 到 网 站 某 一 目录 下 ,数据 库 中 存储 的 是 图 片 的 相对 路 径 。 
【技术 要 领 】ADODB. Stream 对 象 的 使 用 。 

【解决 问题 】 二 进 制 数 据 或 文本 流 操作 。 

【应 用 领域 】 数 据 无 组 件 上 传 。 
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效果 图 


当 单 击 图 11-3 中 的 “上 传 文件 "按钮 时 ,会 弹出 如 图 11-6 所 示 的 网 页 。 在 该 网 页 中 用 
户 可 以 选择 要 上 传 的 文件 。 
于 文件 上 传 - Vindors Internet Erplorer 


请 选择 要 上 传 的 文件 ， 


BD:\jisdo01. jpg 


可 上 传 zip rar doc jpg pdf、ppt 等 格式 的 文件 


图 11-6 选择 要 上 传 的 文件 


单 击 图 11-6 中 的 “上 传 ?按钮 后 ,会 将 图 片上 传 到 网 站 相应 目录 ,并 返回 上 传 文件 的 相 
对 路 径 , 如 图 11-7 所 示 。 如 果 上 传 文件 的 格式 不 对 , 则 会 弹出 如 图 11-8 所 示 的 提示 对 
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图 11-7 上 传 文件 并 返回 上 传 文件 相对 路 径 
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对 不 起 ， 出 错 了 。 


出 错 信息 : 对 不 起 ， 您 上 传 的 文件 格式 不 对 。 


图 11-8 上 传 文件 格式 不 正确 


任务 分 析 

本 任务 要 求 将 商品 图 片上 传 到 网 站 某 一 目录 下 ,然后 存储 图 片 相对 路 径 到 数据 库 。 
重点 和 难点 

图 片 文件 的 无 组 件 上 传 。 

操作 步骤 

(1) 制作 upfile. asp 页 面 ,详细 代码 如 下 。 

<%@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" % ><head> 


<meta http - equiv= "Content — Type" content = "text/html; charset = gb2312" /> 
<title > 文件 上 传 </title > 


</head> 
<divalign= "center"> 
请 选择 要 上 传 的 文件 : 


< form action = "upfilesave.asp" method= "post” name = "FORM"> 
< input type = "file" name = "upfile" style= "width:300" value= "" id= "upfile"> 
<br /> 
< input type= "submit" name = "submit" value = "上传 " /> 
<br /> 
可 上 传 zip rar doc jpg pdf .ppt 等 格式 的 文件 
</form> 
</div> 


(2) 制作 upfilesave. asp 页 面 , 详 细 代 码 如 下 。 


<title> 文 件 上 传 </title> 
< 和 

'GetFileName 函数 用 来 获取 上 传 文件 名 
Function GetFileName(ByVal strFile) 
If strFile <> "" Then 
GetFileName = mid(strFile, InStrRev(strFile，"\") +1) 
Else 
GetFileName = "" 
End If 
End function 
strFileName = Request. Form("upfile") 
Set objStream = Server.CreateObject("ADODB. Stream") 
objStream. Type = 1 
' 打 开 Stream 对 象 来 操作 二 进 制 或 文本 数据 的 流 
objStream. Open 
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"将 现 有 文件 的 内 容 加 载 到 Stream 中 
objStream. LoadFromFile strFileName 
dinm filename 
"利用 当前 时 间 的 年 .月 .日 .时 、 分 . 秒 和 一 个 随机 数 来 指定 上 传 后 的 文件 名 ,保证 上 传 文件 无 重 名 
filename = year(now)g&month(now)g&day(now)&hour (now)gminute(now) 
&second( now)&ranNum&". "gright(GetFileName( strFileName), 3) 
"获取 要 上 传 文件 后 组 并 进行 判断 过 滤 , 以 保证 上 传 文件 的 安全 性 
dim fname 
fname = right(GetFileName(strFileName),3) 
fname = lcase(fname) 


if fname = "exe" or fname = "asp" or fname= "spx" or fname = "com" then 
response. Redirect ("upfilemsg. asp?info= 对 不 起 ,不 能 上 传 可 执行 文件 ") 
end if 


' 这 里 可 以 根据 需要 指定 更 多 上 传 文件 格式 

if fname <> "zip" and fname <> "doc" and fname <> "ppt" and fname <> "gif" and 
fname <> "jpg" and fname <> "pdf" then 

response. Redirect ("upfilemsg. asp?info= 对 不 起 ,您 上 传 的 文件 格式 不 对 。") 

end if 

"获取 上 传 文件 的 尺寸 大 小 
dim fsize 
fsize = len(objStream. read() ) 
fsize = fsize *# 2 

fsize= fsize /1024 

' 这 里 可 以 根据 需要 指定 要 上 传 文件 的 最 大 尺寸 
if fsize > 1000000 then 

response. Redirect ("upfilemsg. asp?info= 对 不 起 ,不 能 上 传 大 于 1000MB 的 文件 ") 
end if 

"把 Streanm 的 二 进 制 内 容 保存 为 服务 器 网 站 中 的 文件 ,实现 上 传 功能 

objStream. SaveToFile Server. MapPath("upfile/proimage/"&filename),2 

objStream. Close 

"将 上 传 到 服务 器 中 的 文件 相对 路 径 返 回 到 表单 文本 框 中 

response. write "< script > window. opener. document.myform. bookpic. value = '"& "upfile/ 
proimage/"&filename &"'</script>" 
response. write("<div align= center >") 

Response. Write("<br > 文件 上 传 成 功 .<br > 请 不 要 更 改 上 传 文件 地 址 .<br > 文件 大 小 : "& fsize 
&"KB< br >") 

%> 
<divalign= "center">< input type = "submit" name = "button” id = "button” value = "关闭 " 
onclick = "window. close();"/></div> 


(3) 制作 upfilemsg. asp 页 面 ,详细 代码 如 下 。 


<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %> 
< html xmlns = "http://www.w3.org/1999/xhtml"> 


<head > 

< meta http - equiv = "Content ~ Type" content = "text/html; charset = gb2312" /> 
<title> 信 息 提 示 </title> 

</head> 

<body> 


<p align = "center"> 对 不 起 ,出 错 了 。</p> 
<p align = "center"> 出 错 信息 : <% = request("info") %></p> 
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<div align= "center"><a href = "upfile. asp"> 返 回 上 传 网 页 </a> 

</div> 

</body> 

</html > 

代码 说 明 : 

(1) 程序 通过 ADODB. Stream 对 象 中 的 相关 方法 实现 文件 上 传 ,例如 通过 Stream 对 
象 的 LoadFromFile 将 现 有 文件 的 内 容 加 载 到 Stream 中 。 通 过 Stream 对 象 的 SaveToFile 
方法 把 Stream 的 二 进 制 内 容 保存 到 文件 。 

(2) 上 传 后 的 文件 命名 利用 当前 时 间 的 年 、 月 、 日 、 时 ,分 、 秒 和 一 个 随机 数 来 指定 ,这 样 
就 可 以 保证 上 传 文件 无 重 名 ,上 传 后 的 文件 名 如 图 11-7 所 示 。 

(3) 文件 上 传 之 后 需要 将 上 传 到 服务 器 中 的 文件 相对 路 径 返回 到 添加 或 修改 表单 的 相 
应 文本 框 中 。 代 码 如 下 。 

response. write "< script > window. opener. document. myform. bookpic. value = '" 

& "upfile/proimage/"&filename&"'</script>" 

以 上 代码 中 的 "myform” 为 添加 或 修改 表单 的 表单 名 称 ;“bookpic” 为 表单 中 存放 图 片 
路 径 的 文本 框 ;“upfile/proimage/ "为 存储 上 传 图 片 的 服务 器 相对 路 径 。 用 户 可 以 根据 自 
己 的 需要 进行 相应 的 修改 。 


知识 点 拓展 


[1] 记录 集 对 象 的 update 方法 可 用 来 修改 和 增加 记录 。 修 改 记录 的 代码 如 下 所 示 。 


strSQL= "select * from Goods where GoodID= '"&GoodID&"'" 
rs. open strSQL, conn, 1,3 

rs("GoodName" ) = GoodName 

rs("Category") = Category 

rs("Price") = Price 

rs("Quantity") = Quantity 

rs("Goodpic") = Goodpic 

rs("Description") = Descriptionstr 


rs. update 

如 果 需 要 增加 记录 ,只 需要 在 第 二 行 代码 下 加 入 rs. AddNew 语句 增加 一 条 新 的 记录 ， 
然后 给 记录 的 各 个 字段 赋值 ,最 后 通过 rs. update 语句 即 可 增加 一 条 新 的 记录 。 通 过 这 种 
方式 修改 和 增加 记录 比 使 用 update 和 insert SQL 语句 结构 更 清晰 ,不 容易 出 错 。 

[2] 很 多 时 候 需要 将 客户 端的 文件 上 传 到 服务 器 上 ,比如 上 传 商品 图 片 和 下 载 文档 等 。 
要 实现 该 功能 ,一 般 有 第 三 方 上 传 组 件 和 无 组 件 上 传 两 种 方法 。 

第 三 方 上 传 组 件 提供 的 文件 上 传 功能 是 由 个 人 或 公司 开发 的 上 传 组 件 ,通常 将 其 编译 
成 动态 链接 库 (. dD) 文件。 比较 常用 的 有 ASPUpload 和 LyfUpload 等 。 要 使 用 第 三 方 组 
件 ,就 必须 在 服务 器 上 注册 该 组 件 。 如 果 服 务 器 是 自己 的 就 没有 什么 困难 ,但 如 果 是 租用 的 
服务 器 , 则 没有 权利 注册 组 件 。 此 时 考虑 通用 性 应 该 使 用 无 组 件 上 传 , 因 为 无 组 件 上 传 不 需 
要 使 用 第 三 方 组 件 , 直 接 上 传 文件 ,不 需要 服务 器 的 支持 安装 。 
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[3] Stream 对 象 可 以 用 来 表示 二 进 制 数 据 或 文本 的 流 。 可 以 通过 指向 包含 二 进 制 或 


文本 数据 的 对 象 (通常 是 文件 ) 的 URL 来 获取 Stream 对 象 的 实例 。 


例如 : 
objStream. LoadFromFile strFileName 


通过 将 Stream 对 象 实例 化 。 这 些 Stream 对 象 可 用 来 存储 用 于 应 用 程序 的 数据 ,实例 


化 的 Stream 对 象 在 默认 情况 下 与 基本 源 没有 关联 。 


用 Stream 对 象 的 方法 和 属性 可 以 执行 下 列 操作 。 

Open 方法 从 Record 或 URL 打开 Stream 对 象 。 

Close 方 法 关闭 Stream。 

Write 和 WriteText 方法 向 Stream 中 输入 字 节 或 文本 。 

Read 和 ReadText 方法 从 Stream 中 读 取 字 节 。 

Flush 方法 将 仍 在 ADO 缓冲 区 中 的 任何 Stream 数据 写 人 基本 对 象 。 
CopyTo 方法 将 Stream 的 内 容 复制 到 另 一 Stream 。 

SkipLine 方 法 和 LineSeparator 属性 控制 从 源 文 件 中 读 取 行 的 方式 。 
EOS 属性 和 SetEOS 方法 确定 流 位 置 的 结尾 。 

SaveToFile 和 LoadFromFile 方 法 保存 和 恢复 文件 中 的 数据 。 
Charset 属性 指定 用 于 存储 Stream 的 字符 集 。 

Cancel 方法 终止 异步 Stream 操作 。 

Size 属性 确定 Stream 中 的 字 节 数 。 

Position 属性 控制 Stream 中 的 当前 位 置 。 

Type 属性 确定 Stream 中 的 数据 类 型 。 

State 属性 确定 Stream 的 当前 状态 (已 打开 ,关闭 或 正在 执行 ) 。 
Mode 属性 指定 Stream 的 访问 模式 。 

其 中 ,SavaToFile 和 LoadFromFile 方法 的 详细 语法 如 下 。 

(1) SaveToFile 方法 。 

把 Stream 的 二 进 制 内 容 保存 到 文件 。 

语法 : 


Stream. SaveToFile FileName, SaveOptions 


参数 : 
FileName: String 值 ,包含 要 保存 Stream 内 容 的 文件 的 完整 名 称 。 可 以 保存 到 任何 有 


效 的 本 地 位 置 ,或 任何 可 以 通过 UNC 值 访 问 的 位 置 。 


SaveOptions: SaveOptionsEnum 值 ,指定 当 文件 不 存在 时 SaveToFile 是 否 创建 新 文 


件 。 默 认 值 为 adSaveCreateNotExists。 如 果 指 定 的 文件 不 存在 ,可 以 用 这 些 选项 来 指定 产 
生 错 误 。 还 可 以 指定 SaveToFile 覆盖 现 有 文件 的 当前 内 容 。 


注意 : 如 果 履 盖 现 有 的 文件 (设置 adSaveCreateOverwrite),SaveToFile 将 截断 原始 文 


件 中 超出 新 EOS 的 所 有 字 节 。 


说 明 
SaveToFile 可 用 于 将 Stream 对 象 的 内 容 复制 到 本 地 文件 。Stream 对 象 的 内 容 或 属性 
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不 发 生变 化 。 调 用 SaveToFile 之 前 ,Stream 对 象 必须 被 打开 。 

此 方法 不 更 改 Stream 对 象 与 其 基本 源 的 关联 。Stream 对 象 将 仍 与 原来 的 URL 关联 ， 
该 URL 在 Stream 对 象 打开 时 就 是 其 源 。 

完成 SaveToFile 操作 后 , 流 中 的 当前 位 置 (Position) 被 设置 到 流 的 开始 处 (0)。 

(2) LoadFromFile 方法 。 

将 现 有 文件 的 内 容 加 载 到 Stream 中 。 

语法 : 


Stream. LoadFromFile FileName 


参数 : 

FileName: String 值 ,包含 要 加 载 到 Stream 中 的 文件 的 名 称 。FileName 可 以 包含 任 
何 UNC 格式 的 有 效 路 径 和 名 称 。 如 果 指 定 的 文件 不 存在 ,将 发 生 运 行 时 错误 。 

说 明 : 

此 方法 可 用 于 将 本 地 文件 的 内 容 加 载 到 Stream 对 象 中 。 还 可 用 于 将 本 地 文件 的 内 容 
上 载 至 服务 器 。 

调用 LoadFromFile 之 前 Stream 对 象 必须 是 打开 的 。 此 方法 不 改变 Stream 对 象 的 绑 
定 ; 它 将 仍旧 绑 定 到 原来 打开 Stream 的 URL 所 指定 的 对 象 。LoadFromFile 用 从 该 文件 
中 读 取 的 数据 覆盖 Stream 对 象 的 当前 内 容 。 

Stream 中 任何 现 有 的 字 节 都 被 该 文件 的 内 容 覆 盖 。LoadFromFile 创建 的 EOS 后 跟随 
的 任何 原 有 和 剩余 的 字 节 都 将 被 截 去 。 在 调用 LoadFromFile 后 ,当前 位 置 将 设置 在 
Stream 的 开始 处 (Position 为 0) 。 


实 训 制作 一 个 简单 的 新 闻 发 布 模块 


实 训 目的 


通过 上 机 编程 ,让 学 生 运用 本 模块 所 学 的 知识 制作 一 个 简单 的 新 闻 发 表 模块 ,使 学 生 能 
熟练 运用 HTML 在 线 编辑 器 插入 和 编辑 新 闻 信息 。 

实 训 内 容 

制作 一 个 简单 的 新 闻 发 布 模块 。 

实 训 过 程 

首先 建立 一 个 Access 数据 库 newsdb. mdb, 并 在 数据 库 中 创建 news 表 , 表 中 共 添 加 了 
newsid( 自 动 编号 ) ,headline( 文 本 ) ,newsType( 文 本 ) 和 newsContent( 备 注 ) 共 计 4 个 字段 。 
分 别 表示 新 闻 的 编号 .标题 ,类别 和 内 容 等 。 接 着 制作 以 下 6 个 页 面 ,各 个 页 面 的 名 字 及 功 
能 如 下 。 

news. asp: 浏览 所 有 新 闻 页 面 , 并 提供 增 、 删 、 改 和 查 等 功能 。 


newsAddForm. asp: 增加 新 闻 表 单 页 面 ,提供 新 闻 信 息 录入 界面 。 
newsAdd. asp: 增加 新 闻 处 理 页 面 .将 增加 新 闻 表 单 页面 收 集 的 数据 提交 数据 库 。 
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newsEditform. asp: 修改 新 闻 表单 页 面 ,从 数据 库 中 提取 新 闻 信 息 显 示 以 供 修改 。 
newsEdit. asp: 修改 新 闻 处 理 页 面 .将 修改 新 闻 表单 页 面 收 集 的 数据 提交 数据 库 。 
newsDelete. asp: 新 闻 删 除 页 面 ,删除 某 选 定 新 闻 。 

result. asp: 新 闻 查 询 结 果 页 面 ,显示 新 闻 查 询 结果 。 

(1) news. asp 页 面 的 代码 如 下 所 示 。 


< html > 
<head> 
<title > 新 闻 浏 览 </title> 
</head> 
< script language = javascript > 
function SureDel (newsid) 
{ 
证 ( confirm(" 你 是 否 真 地 要 删除 该 商品 ?")) 
{ 
window. location. href = "newsDelete.asp?newsid=" + newsid+""; 
nl 
} 
</script > 
<body> 
新 闻 浏 览 
<hr> 
< table border =0 cellpadding = "0"> 
<tr> 
<td> 新 闻 浏 览 页 面 </td> 
</tr> 
<tr> 
<tdalign= "right">< form action= "result.asp" method= "post" name = "forml" target = ”self"> 
查询 项 : 
< select name = "searchitem"> 
< option value = "headline" selected = true> 新 闻 标 题 </option> 
< option value = "content"> 新 闻 内 容 </option> 
</select > 
关键 词 : 
< input type = "text" size= "10" name = "searchvalue"> 
< input type= "submit" name = "submit" value = "查询 "> 
</form> 
</td> 
</tr> 
<tr> 
<td align = "right"><a href = "newsAddForm.asp"> 添 加 商品 </a></td> 
</tr> 
<tr><td> 
<table border = 1 cellspacing=1> 
<tr> 
<td> 编 号 </td>< td> 标 题 </td>< td> 类 型 /td><td> 内 容 </td><td> 操 作 </td> 
</tr> 
<! -- #include file= "conn.asp" ——> 
<% 
Set rs = Server. CreateObject ("ADODB. Recordset") 


11 模 块 ”商品 发 布 
多 2 


rs. RctiveConnection = Conn 
rs. Open "select * from news order by newsid" ,conn,1,1 
rs.pagesize=3 
if request("page") ="" then 
curpage = 1 
else 
curpage = cint(request("page")) 
end if 
if curpage * rs. pagesize> rs. RecordCount then 
if rs. RecordCount mod rs. pagesize = 0 then 
curpage = rs. RecordCount\rs. pagesize 
else 
curpage = (rs. RecordCount\rs. pagesize) +1 
end if 
end if 
rs.absolutepage = curpage 
fori = 1 to rs.pagesize 
> 
<tr><td><% =rs("newsid") % ></td><td><% =rs("headline") %></td> 
<td><% =rs("newsType") %></td><td><% =rs("newsContent") %></td><td> 
<a href = "newsEditform.asp?newsid=<$% = rs("newsid") %>"> 修 改 </a>| 
<a href = 'javascript:SureDel(<% = rs("newsid")%>) > 删除 </a></td> 


</tr> 
< 和 
rs. movenext 
if rs. eof then 
和 
exit for 
end if 
next 
%> 
</table> 
</td> 
</tr> 
</table> 


< form action = "news.asp" target ="_self"> 
<hr size=0 width= '100% "> 
第 < font color = red><% = cstr(curpage) %></font> 页 / 
共 < font color = red><% = cstr(rs. pagecount) %></font > 页 &nbsp; &nbsp; 
本 页 < font color = red><% = cstr(i 一 1)$></font> 条 / 
共 < font color = red><% = cstr(rs. recordcount) %></font > 条 
< 
if curpage = 1 then 
%> 
< 
else 
%> 
[<a href = "news.asp?page = 1"> 首 页 </a>] 
[<a href = "news.asp?page =<% =cstr(curpage - 1)%>"> 前 页 </a>] 
<% 
end if 
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if curpage = rs.pagecount then 
先 > 
< 和 
else 
先 > 
[<a href = "news.asp?page =<% =cstr(curpage+1) %>"> 后 页 </a>] 
[<a href = "news.asp?page=<$ = cstr(rs.pagecount) %>"> 未 页 </a>] 
<% 
end if 
先 > 
<label> 
< input name = "page" type= "text" id= "page" size= "4"> 
< input type = "submit" name = "Submit" value = " 跳 转 "> 
</label > 
<% 
set rs= nothing 
set conn = nothing 
%> 
</form> 
</body> 
</html > 


(2) newsAddForm. asp 的 代码 如 下 所 示 。 


<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %> 
<html> 
<head> 
<title > 添加 新 闻 </title> 
</head> 
<body> 
添加 一 条 新 闻 
<hr> 
< form action = "newsAdd. asp" method = post name = "myform"> 
<table border = 0 cellspacing=0> 
<tr> 
<td > 标题 : </td> 
<td>< input name = "headline" type = "text" id = "headline" size= "20"></td></tr> 
<tr> 
<td> 类 别 : </td> 
<td>< label > 
< select name = "newsType" id= "newsTYpe"> 
<option value= "院内 新 闻 "> 院 内 新 闻 </option> 
< option value= "招生 就 业 "> 招生 就 业 </option> 
< option value = "专业 建设 "> 专业 建设 </option> 
</select > 
</label ></td> 
</tr> 
<tr> 
<td> 内 容 : </td> 
<td> 
< input name = "newsContent" type = "hidden" id = "newsContent" value = ""> 
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<IFRAME ID = "newsContent" SRC= "editubb/eWebEditor. asp? id = newsContent&style = 
standard" FRAMEBORDER = "0" SCROLLING = "no" WIDTH = "550" HEIGHT = "250"></IFRAME> 
</td></tr> 
<tr><td colspan= "2" align= "center"> 
< input type = submit value = "添加 "> 
< input type = "reset" name = "Submit" value = " 重 填 "> 
</td></tr> 
</table> 
</form> 
</body> 
</html > 


(3) newsAdd. asp 的 代码 如 下 所 示 。 


<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %$> 


<title > 添加 新 闻 </title> 
<! -- #include file= "conn.asp” -一 > 
< 和 


sql = "select * from news" 

Set rs = Server. CreateObject ("ADODB. Recordset") 
rs. Open sql,conn,1,3 

rs.addnew 
rs("headline" 


= trim(Request. Form("headline" )) 
rs("newsType") = trim(Request. Form("newsType" )) 
rs("newsContent") = trim(Request. Form("newsContent")) 
rs. Update 

rs.Close 

Conn. Close 

Set Conn = nothing 

response. Redirect "news.asp" 

先 > 


其 他 几 个 页 面 的 代码 与 本 章 模拟 制作 任务 的 代码 类 似 ,在 此 不 再 袭 述 。 

实 训 总 结 

本 实 训 的 主要 目的 是 让 学 生 掌 握 利 用 HTML 在 线 编辑 器 插入 和 编辑 新 闻 信 息 。 让 学 
生 能 综合 运用 本 章 所 学 的 知识 制作 一 个 简单 的 新 闻 发 布 模块 。 
综合 任务 


创建 一 个 简单 的 留言 表 , 只 需 有 "id"“ 用 户 名 ”和 ”留言 内 容 " 三 个 字段 即 可 ,编写 一 个 
简单 的 留言 板 ,要 求 利用 HTML 在 线 编辑 器 插入 和 编辑 留言 信息 。 


购物 车 、 订 单 和 在 线 支 付 


在 电子 商务 网 站 中 ,购物 车 .订单 和 在 线 支付 是 很 重要 和 有 特色 的 功能 。 用 户 在 购买 商 
品 后 应 在 其 购物 车 中 显示 所 购买 的 商品 ,同时 应 允许 用 户 修改 和 删除 购物 车 中 的 商品 ; 用 
户 提交 购物 后 应 该 能 生成 订单 ; 同时 网 站 应 该 提供 给 用 户 基本 的 在 线 支付 功能 。 本 模块 主 
要 以 实例 的 形式 讲述 购物 车 .订单 和 在 线 支 付 等 功能 的 实现 。 

能 力 目标 

1. 能 使 用 Access 的 设计 视图 设计 数据 表 

2. 能 使 用 Session 十 Dictionary 实现 “购物 车 ”功能 

3. 能 利用 Select…Case 多 分 支 结 构 在 一 个 ASP 网 页 中 实现 多 个 操作 步骤 

4. 能 利用 支付 宝 接口 文件 集成 支付 宝 在 线 支付 功能 

知识 目标 
.Access 数据 表 主键 设置 
.Session 和 Dictionary 对 象 的 使 用 
.Select…Case 语句 的 使 用 
.地 址 栏 参 数 的 获取 


一 


模拟 制作 任务 


任务 1 建立 数据 库 和 数据 表 


任务 背景 

购物 车 和 订单 功能 都 需要 用 到 数据 库 , 因 此 本 任务 中 数据 库 是 必 不 可 少 的 。 下 面 介绍 
如 何 建 立 后 台数 据 库 。 

任务 要 求 

建立 购物 车 和 订单 功能 所 需要 的 数据 库 和 数据 表 , 为 这 两 个 模块 的 后 台 管理 和 前 台 
示 打 下 基础 。 

【技术 要 领 】Access 主键 设置 。 

【解决 问题 】 用 Access 建立 数据 库 和 数据 表 。 

【应 用 领域 】 网 站 后 台 商 品 和 订单 管理 。 

任务 分 析 

开发 数据 库 程 序 时 ,首先 要 规划 数据 库 , 尽 量 使 数据 库 设计 合理 , 既 包 括 必 要 信息 ,又 能 


疯 


节省 数据 库 的 存储 空间 。 


重点 和 难点 


Access 主键 设置 。 


操作 步骤 


& 
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(1) 首先 创建 一 个 数据 库 , 这 里 命名 为 Goods. mdb。 


(2) 在 数据 库 中 建立 Goods 和 Orders 两 张 数据 表 , 各 数据 表 中 的 字段 如 表 12-1 和 


表 12-2 所 示 。 
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表 12-1 Goods 商品 记录 表 

字段 名 称 数据 类 型 长 度 默认 值 必 填 字段 允许 空 字 符 串 字段 描述 
人 自动 编号 唯一 标识 
goodname 文本 50 是 否 商品 名 称 
category 文本 50 是 否 品 分 类 
price 数字 单 精度 0.0 是 否 单价 
quantity 数字 整 型 0 是 否 库存 数量 
goodpic 文本 50 否 是 商品 照片 
description 备注 否 是 商品 描述 

表 12-2 Orders 订单 记录 表 
字段 名 称 数据 类 型 长 度 默认 值 。 必 填 字段 ”允许 空 字符 串 字段 描述 

actionid 自动 编号 唯一 标识 
actiondate 日 期 /时 间 NowO 是 否 订单 时 间 
goodid 数字 长 整 型 0 是 大 商品 编号 
goodname 文本 50 是 否 商品 名 称 
bookcount 数字 整 型 0 是 否 订购 数量 
dingdan 文本 50 是 否 订单 号 
zhuangtai 数字 整 型 0 是 否 订单 状态 
shouhuoname 文本 50 是 否 收 货 姓 名 
shouhuodizhi 文本 50 是 否 收 货 地 址 
youbidn 文本 50 是 否 邮编 
liuyan 文本 50 否 是 发 票 抬头 
zhifufangshi 数字 整 型 0 是 否 支付 方式 
songhuofangshi 数字 整 型 0 是 否 送 货 方式 
shousex 数字 整 型 0 理 是 收 货 性 别 
xiaoji 数字 单 精度 0.0 是 否 小 计 
zonger 数字 单 精度 0.0 是 否 订单 总 额 
userzhenshiname ”文本 50 是 否 真实 姓名 
useremail 文本 50 否 是 用 户 邮 箱 
usertel 文本 50 是 否 用 户 电话 
danjia 数字 单 精度 0.0 是 否 商品 单价 
feiyong 数字 单 精度 0.0 是 否 发 货 费用 
fapiao 数字 整 型 0 否 否 是 否 开发 发 票 
fhsj 日 期 /时 间 是 否 发 货 时 间 
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本 任务 数据 库 文件 位 于 网 站 根 目录 下 的 data 子 目 录 中 。 连 接 数据 库 的 代码 写 到 了 
conn. asp 文件 中 ,详细 代码 如 下 。 
< 和 
db = "data/Goods.mdb" 
Set conn = Server. CreateObject ("ADODB. Connection") 
url = "Provider = Microsoft. Jet. OLEDB. 4. 0;Data Source = "& Server. MapPath( db) 


conn. Open(url1) 
多 > 


任务 2 编写 商品 展示 页 面 


任务 背景 

用 户 在 购买 商品 前 需要 浏览 商品 信息 ,本 任务 负责 从 数据 库 中 取出 部 分 最 新 发 布 商品 
展示 给 用 户 ,用户 在 浏览 商品 后 决定 是 否 购买 。 

任务 要 求 

商品 展示 页 面 要 求 一 行 显示 多 个 商品 ,让 浏览 者 先 大 致 了 解 商品 信息 ,然后 单 击 商品 图 
片 或 商品 名 浏览 更 详细 的 信息 。 

【技术 要 领 】 利 用 一 个 计数 变量 i 记录 行当 前 显示 商品 的 个 数 , 当 i 值 达到 行 显示 最 大 
数 时 换行 。 

【解决 问题 】 控 制 表格 的 一 行 中 显示 的 商品 个 数 。 

【应 用 领域 】 商 品 展示 。 

效果 图 

商品 信息 展示 的 界面 如 图 12-1 所 示 。 


下 = sl ET 


图 12-1 商品 信息 展示 界面 
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任务 分 析 

商品 信息 展示 需要 访问 数据 表 , 通 过 循环 遍历 数据 表 中 的 部 分 数据 ,然后 将 这 些 数据 显 
示 出 来 。 在 展示 商品 时 ,为 了 展示 更 多 商品 信息 通常 一 行 要 显示 多 个 商品 。 此 时 利用 一 个 计 
数 变量 i 记录 行当 前 显示 商品 的 个 数 , 当 i 值 达 到 行 显示 最 大 数 时 输出 行 结束 符 "一 /tr "。 

重点 和 难点 

利用 一 个 计数 变量 i 记录 行当 前 显示 商品 的 个 数 , 当 i 值 达 到 行 显示 最 大 数 时 输出 行 结 
东 符 "</tr>"。 

操作 步骤 

(1) 创建 index. asp 页 面 ,网 页 展示 商品 的 主要 代码 如 下 。 


<table width= "700" border = "0" align = "left" cellpadding = "0" cellspacing= "0" > 
<tr> 
<%Sset rs = server. CreateObject("adodb. recordset") 
rs.open "select top 8 * from Goods order by GoodID desc ",conn,1,1 
if rs. eof and rs. bof then 
response. write "< center >< br >< font color = red size = 2> 对 不 起 , 暂 无 此 类 商品 !</font >" 
else 
证 not rs. eof then 
i=1 
do while not rs.eof 多 > 
<td align = "left" valign= "top”> 
<table width= "150" align = "center" cellpadding = "0" cellspacing= "0" > 
<tr><td height = "113" align= "left"> 
<table width ="140”height = "142" cellspacing = "1" cellpadding= "2" border = 
> 


<tbody><TR> 
<TD align= left background = "../wqeshop/images/136. jpg" height = 140 > 
<% if rs("Goodpic") = "" then 
response. write "<div align = center ><a href = products. asp?id="&rs("GoodID")g" >< img 
src = images/emptybook. gif width = 90 height = 90 border = 0></a></div>" 
else%> 
<ahref = "products. asp?id=<% =rs("GoodID") %$>" ><img src="<% =trim(rs("Goodpic")) %>" 
alt = "aaaa" width = "100" height = "100" border = "0" align= "absmiddle" /></a> 
<% end if %></TD></TR></tbody> 
</table> 
</td> 
</tr> 
< 
<tdalign= "left"> 
< table width = "95%" height = "60" align = "center" cellpadding 
<tr> 
<tdwidth="203" align= "center" ><% response. write "<a class= a4 
href = products.asp?id= "&rs("GoodID")&" ><font color = #FF0000>" 
if len(trim(rs("GoodName")))>7 then 
response. write left(trim(rs("GoodName")),7)g".." 
else 
response. write trim(rs("GoodName" )) 


" cellspacing= 


end if 
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response. write "</font ></a>" 
> 
<br /> 
</b> </td> 
</tr> 
<tr> 
<td align = "center”> 市 场 价 : <s><% =rs("Price")g""%></s> 元 </td> 
</tr> 
<tr> 
< td align = " center”> 会 员 价 : < font color = "#FF0000"><% = 
(rs("Price") * 0.9)%></font > 元 </td> 


</tr> 
<tr> 
<td height = "1" background = "../wqeshop/images/body/lineld. gif"></td> 
</tr> 
</table></td> 
</tr> 
</table> 
</td> 
<%if imod4 = 0 then%> 
</tr> 
< 和 
end if 
rs. movenext 
i=i+1 
loop 
rs.close 
end if 
end if 
%> 
</table> 
(2) 在 浏览 器 中 预览 的 效果 如 图 12-1 所 示 。 
代码 说 明 : 


本 代码 中 实现 一 行 显示 4 个 商品 ,总 体 思 路 如 下 。 
(1) 首先 输出 表格 和 行 开始 标签 ,代码 如 下 。 


< table width= "700" border = "0" align = "left" cellpadding = "0" cellspacing= "0" > 
<tr> 


(2) 接着 提取 商品 表 中 的 部 分 数据 (如 最 新 发 布 的 8 条 商品 ) 展 示 给 用 户 ,代码 如 下 。 


i=1 

do while not rs. eof 
逐一 显示 单个 商品 … 
rs.movenext 
= 主 + 1 


loop 


(3) 在 上 面 的 循环 中 如 果 不 输出 行 结束 符 "</br>" , 则 所 有 商品 会 显示 在 一 行 ,这 样 就 
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达 不 到 换行 显示 的 效果 。 所 以 需要 在 循环 中 rs. movenext 代码 行 前 加 入 如 下 代码 。 


<%if imod4 = 0 then$> 
</tr> 
< 
end if 
%> 
以 上 代码 的 作用 是 判断 当 一 行 显示 了 4 个 商品 时 输出 表格 行 结束 符 " 二 /br >" ,这 样 就 
实现 了 一 行 显示 多 个 商品 的 功能 ,最 后 输出 表格 的 结束 标签 "一 /table >"。 


任务 3 编写 浏览 具体 商品 页 面 


任务 背景 

用 户 需 要 单 击 某 一 具体 商品 时 获得 该 商品 的 更 详细 信息 ,同时 在 该 页 面 给 用 户 提 供 “ 购 
买 "“ 在 线 支付 "和 "收藏 "等 功能 。 

任务 要 求 

浏览 具体 商品 界面 将 向 用 户 显示 更 详细 的 商品 信息 ,可 利用 商品 id 从 数据 库 中 提取 商 
品 详细 信息 显示 给 用 户 。 

【技术 要 领 】 首 先 获 取 地 址 栏 中 商品 id 的 值 ,然后 利用 该 商品 id 值 从 数据 库 中 提取 商 
品 详细 信息 。 

【解决 问题 】 商 品 信息 展示 。 

【应 用 领域 】 商 品 信息 展示 。 

效果 图 

浏览 某 一 商品 的 界面 如 图 12-2 所 示 。 


图 12-2 浏览 具体 商品 界面 
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> 
任务 分 析 
当 用 户 单 击 图 12-1 中 某 一 商品 图 片 时 ,该 商品 的 id 值 会 以 超 链接 参数 的 形式 传递 到 
如 图 12-2 所 示 的 网 页 。 在 如 图 12-2 所 示 网 页 中 首先 获取 地 址 栏 中 商品 id 的 值 , 然 后 利 
该 商品 id 值 从 数据 库 中 提取 商品 信息 显示 给 用 户 。 


重点 和 难点 
地 址 栏 参数 获取 和 商品 信息 提取 。 
操作 步骤 


(1) 创建 products. asp 页 面 .在 网 页 中 输入 如 下 代码 。 


< 
editid= Request. Querystring("id") 
Set rs = Server. CreateObject ("ADODB. Recordset") 
rs. ActiveConnection = Conn 
Sql = "select * from Goods where GoodID = '"g&editidg"'" 
rs. Open sql 
if rs. state= 1 then 
多 > 
< Form method= "post" action= "buy.asp"> 
< table width= "700" height = "265" border = "1" align= "center" cellpadding = "0" cellspacing = "0"> 
<tr> 
<tdwidth= "166" rowspan 
"200"></td> 
<td width= "328">< img src = " images/body/orange - bullet. gif" alt = "箭头 " width= "9" 


">< img src="<% =rs("Goodpic") %>" width= "200" height = 


height "” /> 商品 编号 : <% = rs("GoodID")%> 
< input name = "GoodID" type = "hidden" id = "GoodID" value = "<% = rs("GoodID") %>" /> 
</td> 
</tr> 
<tr> 


<td height = "31">< img src = " images/body/orange - bullet.gif" alt = "箭头 ”width = "9" 
height = "7" /> 商品 名 称 : <% = rs("GoodName") %></td> 
</tr> 
<tr> 
<td height = "30">< img src = " images/body/orange - bullet. gif" alt = "箭头 ”width = "9" 
height = "7”/> 商 品类 别 : <% = rs("Category")%></td></tr> 
<tr> 
<td height = "26">< img src = " images/body/orange - bullet. gif" alt = "箭头 " 
height = "7"” /> 库存 : <% = rs("Quantity" ) 当 ></td></tr> 
<tr> 
<td height = "29">< img src = "images/body/orange - bullet. gif" alt= "箭头 " 
height = "7"” /> 市 场 价 : <s><% = rs("Price") $%></s></td></tr> 
<tr> 
<td>< img sr images/body/orange - bullet. gif" alt= "箭头 "width= "9" height = "7" /> 
会 员 价 : <% = rs("Price" ) *0.9%></td> 
</tr> 
<tr> 
<td height = "42" align = "center">< img src = "images/body/itemzoom.gif" alt = "商品 大 图 " 
width= "69" height = "23" /></td> 
<td> 
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< input type = "image" src= "images/buyl.gif" width= "114" height ="37" border = 0> 
< img src = "images/alipay.gif" alt = "支付 宝 " width = "114" height = "37" style= "cursor:hand;" 
onclick= "SureBuy('<% = rs("GoodID") %>', <% =rs("GoodName") $>', '<% =rs("Price") %$>')" /> 
< img src = "images/fav. gif" width= "90" height ="37" border = 0> </td> 
</tr> 
<tr> 
< td height = "42" colspan = "2" align = "left"> 产 品 详细 说 明 : <% = rs("Description")%></td> 
J 
</table> 
</Form> 
< 
end if 
rs.close 
Set rs = nothing 
Conn. close 
Set Conn = nothing 
先 > 


(2) 在 浏览 器 中 预览 效果 如 图 12-2 所 示 。 
代码 说 明 
(1) 获取 地 址 栏 参数 的 代码 如 下 。 


editid = Request. Querystring("id") 
(2) 通过 商品 id 值 查找 商品 信息 的 SQL 语句 如 下 。 


sql = "select * from Goods where GoodID = '"&editid&"'" 


任务 4 编写 购物 车 页 面 


任务 背景 

当 用 户 单 击 如 图 12-2 所 示 页 面 中 的 “购买 ”按钮 时 ,会 将 要 购买 的 商品 添加 到 购物 车 。 

任务 要 求 

购物 车 页 面 应 该 能 够 显示 所 购买 商品 的 名 称 ,数量 和 价格 等 信息 。 还 应 提供 修改 数量 ， 
删除 所 选 商品 和 清空 购物 车 等 功能 。 

【技术 要 领 】 使 用 Session 十 Dictionary 实现 “购物 车 ”功能 。 

【解决 问题 】 使 用 Session 十 Dictionary 实现 “购物 车 ”功能 时 ,购物 车 中 商品 的 添加 、 修 
改 和 删除 等 功能 的 实现 。 

【应 用 领域 】 购 物 车 设计 实现 。 

效果 图 

购物 车 页 面 的 界面 如 图 12-3 所 示 。 

任务 分 析 

本 任务 使 用 Session 十 Dictionary 实现 “购物 车 ”功能 .Session 对 象 趾 存储 特定 用 户 会 话 
所 需 的 信息 。Dictionary 对 象 四 可 以 存储 key/item 数据 对 ,其 中 key 的 值 是 唯一 的 ,而 item 
的 值 可 以 重复 , 且 item 项 与 key 项 相关 联 。 这样 key 可 以 用 来 存储 购买 商品 的 ID ,而 item 
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图 12-3 购物 车 界面 


则 可 以 存储 购买 商品 的 数量 。 


重点 和 难点 

Dictionary 对 象 的 使 用 。 

操作 步骤 

(1) 创建 buy. asp 页 面 , 在 网 页 中 输入 如 下 代码 。 


GoodID = request. Form( "GoodID") 
response. Write GoodID 
Num=1 
' 如 果 Session("cart") 不 存在 , 则 创建 Dictionary 对 象 并 将 其 存 人 Session("cart") 中 
If (Not IsObject(Session("cart"))) then 
Set Session("cart") = Server. CreateObject ("Scripting.Dictionary") 
end if 
Set Cart = Session("cart") ' 将 Session("cart") 展 开 一 个 本 地 副本 调用 
"如 果 该 商品 的 ID 不 存在 , 则 可 以 使 用 Dictionary 对 象 的 Add 方 法 
"将 商品 的 编号 (GoodID) 和 购买 的 数量 Num 写 和 人 到 Cart 中 
' 否 则 商品 数量 加 1 
If (Not Cart. Exists(GoodID)) then 
Cart. Add GoodID, Num 
else 
Cart. item(GoodID) = Cart. item(GoodID) + 1 
end if 
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"接着 再 将 修改 后 的 本 地 副本 整体 赋值 给 Session ("cart") 
Set Session("cart") = Cart 

" 跳 转 到 shopCart. asp 页 面 

response. Redirect("shopCart.asp") 


(2) 创建 shopCart. asp 页 面 , 在 网 页 中 输入 如 下 代码 。 


<%@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %$> 
<! —— #include file= "conn.asp" -一 > 
<html xmlns = "http://www. w3.org/1999/xhtml"> 
<head> 
<meta http - equiv= "Content - Type" content = "text/html; charset = gb2312" /> 
<title > 购物 车 </title> 
< script language = "javascript1. 2" type = "text/javascript"> 
.Es 
function changenum( id, numid){ 
num = document. getElementById( numid). value; 
window. location. href = "changeCart.asp?id=" + id+ "gnum= "+num 
} 
function deleteGood( id){ 
window. location. href = "deleteCart.asp?id= "+ jd 
} 
function gotoindex(){ 
window. location. href = "index.asp” 
} 
function gotoClearCart( ){ 
window. location. href = "clearCart. asp" 
} 
function gotomyCart( ){ 
window. location. href = "myCart.asp" 
} 
= 一 乞 
</script> 
</head> 
<body> 
<form id= "formi1" name = "forml" method = "post" action = "modifyCart.asp"> 
<p> gnbsp;</p> 
<table width = " 663" height = "117" border = "1" align = "center" cellpadding = 


cellspacing= > 

<tr> 
<th width= "96"> 商 品 编号 </th> 
<th width= "128"> 商 品名 称 </th> 
<th width= "168"> 数 量 </th> 
<th width= "71"> 类 别 </th> 
<th width = 
<th width= "80"> 修 改 数量 </th> 
<th width = "42"> 删 除 </th> 

</tr> 

<% 


' 将 Session("cart") 展 开 一 个 本 地 副本 Cart 调用 


Set Cart = Session ("cart") 
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' 采 用 将 Cart 中 的 数据 组 分 别 赋值 给 Keys( 商 品 耳 组 ) 和 Items (商品 数量 组 ) 这 两 个 变量 
Keys = Cart. keys 
Items = Cart. items 
dim sum, sumPrice 
sum=0 
sumPrice=0 
' 使 用 循环 语句 显示 用 户 购 买 的 商品 和 数量 以 及 总 价 等 信息 
For i = 0 To Cart.Count—1 
goodid = Keys(i) 
sum = sum+ Items(i) 
Set rs = Server.CreateObject ("ADODB. Recordset") 
ssql = "SELECT * FROM Goods WHERE GoodID = '"&goodidg"'" 
Rs. Open ssql,conn,1,3 
sumPrice = sumPrice+ Items(i) * rs("Price") 
多 > 
<tr> 
<td><% =rs("GoodID") %$></td> 
<td><% =rs("GoodName") %></td> 
<td>< input id= "goodNum <% = rs("GoodID")% >" type = "text" value = "< 有 = Items(i) 
%>"></td> 
<td><% =rs("Category") %$></td> 
<td><% =rs("Price" ) %></td> 
<tdalign= "center">< input name = "changeNum" type = "button" id = "changeNum" value=" 
修改 " onclick = "changenum('<% = rs("GoodID") %>', 'goodNum <% = rs("GoodID") %>')"/></td> 
<tdalign= "center">< img src = " images/trash. gif" style = "cursor:hand;"” alt = "删除 " 
width = "18" height = "18" onclick = "deleteGood('<% = rs("GoodID") %$>')" /></td> 
</tr> 
< 
rs.close 


" align = "center"> 购 物 车 里 有 商品 &nbsp;<font color ="#FF0000"><% = 
Cart.Count 和 ></font > gnbsp; 种 总 数 &nbsp;<font color = "#FF0000"><% = sum 名 ></font > &nbsp; 
件 共计 gnbsp;<font color ="#FF0000"><% = sumPrice%></font > &nbsp; 元 </td> 

</tr> 


align= "center">< label > 

< input type = "button" name = "Submit" value = "继续 购物 " onclick = "gotoindex()" /> 
< input type = " button” name = " clearCart” value =" 清 空 购物 车 ”onclick = 

"gotoClearCart()" /> 
< input type = "button" name = "Submit4" value = "去 收银 台 " onclick = "gotomyCart()" /> 
</label ></td> 

</tr> 
</table> 

</form> 

</body > 

</html > 


(3) 在 网 页 中 浏览 购物 车 的 效果 如 图 12-3 所 示 。 
(4) 当 在 如 图 12-3 所 示 的 文本 框 中 修改 所 购买 的 商品 数量 并 单 击 “ 修 改 ”按钮 时 ,会 调 


用 changeCart. asp 网 页 ,创建 changeCart. asp 网 页 并 在 其 中 输入 如 下 代码 。 
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<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %$> 
<% 
"获取 商品 id 和 购买 数量 参数 
id = request. Querystring( "id") 
num = request. Querystring("num" 
' 将 Session("cart") 展 开 一 个 本 地 副本 Cart 调用 
Set Cart = Session("cart") 
"如 果 Cart 存在 该 商品 , 则 修改 购买 数量 
If Cart. Exists(id) Then 
Cart. item( id) = Int(num) 
End If 
' 接 着 再 将 修改 后 的 本 地 副本 整体 赋值 给 Session ("cart") 
Set Session("cart") = cart 
' 跳 转 到 shopCart.asp 页 面 
Response. Redirect "shopCart.asp" 
%> 


(5) 当 在 如 图 12-3 所 示 的 网 页 中 单 击 "删除 ”图标 时 ,会 调用 deleteCart. asp 网 页 。 创 


建 deleteCart. asp 网 页 并 在 其 中 输入 如 下 代码 。 


局 


<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %> 

< 

id = request. Querystring( "id") 

' 将 Session("cart") 展 开 一 个 本 地 副本 Cart 调用 

Set Cart = Session("cart") 

If Cart. Exists(id) then “' 判 断 商品 ID 是 否 存在 
Cart. Remove( id) ' 在 Cart 中 删除 该 ID 

End if 

' 接 着 再 将 修改 后 的 本 地 副本 整体 赋值 给 Session ("cart") 

Set Session("cart") = cart 

' 跳 转 到 shopCart.asp 页 面 

Response. Redirect "shopCart.asp" 

%> 


(6) 当 在 如 图 12-3 所 示 的 网 页 中 单 击 “ 清 空 购物 车 ”按钮 时 ,会 调用 clearCart, asp 网 


创建 clearCart. asp 网 页 并 在 其 中 输入 如 下 代码 。 


<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %> 

<% 

' 将 Session("cart") 展 开 一 个 本 地 副本 Cart 调用 

Set Cart = Session("cart") 

' 使 用 Dictionary 对 象 的 RemoveAll 方法 清空 "购物 车 " 
Cart. Removeall( ) 

' 接 着 再 将 修改 后 的 本 地 副本 整体 赋值 给 Session ("cart") 
Set Session("cart") = cart 

' 跳 转 到 shopCart.asp 页 面 

Response. Redirect "shopCart.asp" 

多 > 
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(7) 当 在 如 图 12-3 所 示 网 页 中 单 击 " 继 续 购物 ”按钮 时 ,会 跳 转 到 index. asp 网 页 让 
户 继续 选择 商品 。 

(8) 当 在 如 图 12-3 所 示 网 页 中 单 击 “ 去 收银 台 ” 按 钮 时 ,会 跳 转 到 myCart. asp 网 页 让 
用 户 实现 结算 和 生成 订单 。 


任务 5 编写 结算 和 生成 订单 页 面 


任务 背景 

用 户 在 确定 所 购买 商品 后 ,接着 就 需要 实现 结算 和 生成 订单 。 此 时 用 户 单 击 如 图 12-3 
所 示 网 页 中 的 “去 收银 台 ” 按 钮 ,会 跳 转 到 myCart asp 网 页 ,该 网 页 完成 结算 和 生成 订单 
功能 。 

任务 要 求 

结算 页 面 在 用 户 提交 订单 前 应 该 还 能 看 到 其 选 购 的 商品 信息 ,同时 还 能 让 用 户 输入 收 
货 人 和 发 票 等 相关 信息 ,用 户 完 成 这 些 步 骤 提 交 订 单 最 后 才 生 成 订单 号 。 

【技术 要 领 】 利 用 Select…Case 多 分 支 结构 在 一 个 ASP 网 页 中 实现 结算 的 多 个 步骤 。 

【解决 问题 】 分 步 收集 用 户 订单 信息 。 

【应 用 领域 】 结 算 和 生成 订单 。 

效果 图 
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图 12-5 ”收集 用 户 信息 
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图 12-6 ”用户 确认 订单 
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图 12-7 生成 订单 


任务 分 析 
结算 和 生成 订单 页 面 需 要 分 多 步 实 现 , 利 用 Select…Case 多 分 支 结构 中 在 一 个 ASP 网 


页 中 实现 结算 的 多 个 步骤 。 


重点 和 难点 

在 一 个 ASP 网 页 中 用 多 个 表单 收集 用 户 数据 。 

操作 步骤 

(1) 制作 myCart. asp 网 页 ,在 网 页 中 输入 如 下 代码 。 


<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %> 


<! —— #include file= "conn.asp" -一 > 
<html xmlns = "http://www. w3.org/1999/xhtml"> 
<head> 


<meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title > 我 要 下 订单 </title> 
< script language = "javascript1. 2" type = "text/javascript"> 
es 

function gotoshopCart( ){ 

window. location. href = "shopCart. asp" 

= 

</script > 

</head> 
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<body> 
< 
dim bookid,action, i 
action = request("action") 
select case action 
case "" 
先 > 
<table width= "100%" align= "center”" border = "0" cellspacing= "0" cellpadding = "0"> 
<tr>< td background = "images/body/pdbg01.gif" height = 28 > 下 订单 </td> 
</tr></table><br> 
< form id ="forml”name = "forml”method = "post”action = "mycart.asp?action = shop1"> 
“订单 信息 的 回 显 
</form> 
< 
case "shopl" 
Set rs = server. CreateObject ("adodb. recordset") 
rs.open "select * from users where username = '"&session("username")&"'",conn,l1,1 
userid= rs("userid") 


%> 
<table width= "100%" align= "center" border = "0" cellspacing = "0" cellpadding = "0"> 
<tr> 
<td height =28> > 填写 收 货 信息 </td> 
</tr> 
</table> 


<table width= "90%" border = "0" align = "center" cellpadding = "2" cellspacing = "1" 
bgcolor = " #F1F1F1"> 


«tr > 
<td bgColor ="#F1F1F1" colspan = "2" align = "center"> 请 正确 填写 以 下 收 货 信息 </td> 
</tr> 
< form name = " shouhuoxx" method = "post" action = "mycart.asp?action = shop2" > 
… 收 集 收 货 人 相关 信息 的 表单 项 
</form></table> 
< 和 
case "shop2" 
%> 


<table width= "100%" align= "center" border = "0" cellspacing= "0" cellpadding = "0"> 
<tr><td height =28> >> 提交 订单 </td></tr> 
</table> 
<br><table width= "90% ”align = "center”border = "0" cellspacing = "0" cellpadding= "0"> 
<tr><td> 
… 订 单 信息 的 确认 
< form name = " shouhuoxx" method = "post" action = "mycart. asp?action = ok"> 
<tr bgcolor = " #ffffff" align= "center"> 
<td colspan= "2"><br><table width= "90%" border = "0" cellpadding = "0"> 
<tr><td>< input type = "checkbox" name = "fapiao" value = "1"> 
是 否 要 发 票 ? 
< input name = username type = hidden value = "<% = trim(request("username")) $>"> 
… 通 过 更 多 隐藏 域 (hidden) 收集 上 一 步 信 息 传送 至 下 一 步 
<tr><td height = "30"> 此 订单 的 附加 说 明 (30 字 内 ) 
< input type = "text" name = "liuyan" size= "35" maxlength = "30"> 
</td></tr> 
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<tr><td align= "center"> 
< input type = "button" name= "Submit2" value = "上 一 步 " onClick = "javascript:history. go( - 1)"> 
< input type = "submit" name = "Submit3" value = "完成 "></td></tr></table></td> 


</tr> 
</form> 
</table ></td></tr ></table> 
< 多 
case "ok" 


dim shijian, dingdan 
shijian = now( ) 
dingdan = now( ) 
dingdan = replace(trim(dingdan)," —","") 
dingdan = replace(dingdan, ":","") 
dingdan = replace(dingdan," ","") 
Set Cart = Session ("cart") 
Keys = Cart. keys 
Items = Cart. items 
dim sumPrice3 
For i = 0 To Cart.Count 一 1 
goodid = Keys(i) 
SumPrice3 =0 
Set rs = Server.CreateObject ("ADODB. Recordset" ) 
ssql = "SELECT * FROM Goods WHERE GoodID = '"&goodidg"'" 
Rs. Open ssql,conn,1,3 
sumPrice3 = sumPrice3 + Items(i) * rs("Price") 
goodname = rs("GoodName") 
price= rs("Price") 
"将 订单 信息 添加 到 订单 orders 表 
sql2 = "select * from orders" 
Set rs2 = Server. CreateObject( "ADODB. Recordset") 
rs2. Open sql2, conn,1,3 
rs2.addnew 
if trim(request("username")) ="" then 
rs2("username") = dingdan 
else 
rs2("username") = trim(request ("username")) 
end if 
“省 略 了 修改 订单 orders 表 中 其 他 字段 的 代码 
rs2. Update 
rs2.Close 
rs.close 
Next 
%> 
<table width = "100% " align= "center" border = "0" cellspacing = "0" cellpadding = "0"> 
<tr><td background= "images/body/pdbg01.gif" height = 28 > 
> 订单 提交 成 功 </td> 
</tr> 
</table> 
<table width= "90 %" border = "0" align= "center" cellpadding = 
<tr bgcolor = " #ffffff"> 


cellspacing = 


<td height = "30" colspan = "2" align= "center" bgColor = "#FlFlF1">< strong > 恭 
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喜 订单 提交 成 功 ! 我 们 会 在 第 一 时 间 进 行 处 理 , 请 记 下 您 的 订单 号 以 备查 询 。</strong></td> 
</tr> 
… 订 单 提交 成 功 后 相关 反馈 信息 

</table> 

< 

end select 

%> 

</body> 

</html > 

</body> 

</html > 


(2) 在 浏览 器 中 预览 的 效果 如 图 12-4 一 图 12-7 所 示 。 

代码 说 明 

本 页 代码 利用 Select…Case 多 分 支 结构 在 一 个 ASP 网 页 实现 结算 的 多 个 步骤 ,总 体 思 
路 如 下 。 


< 和 
dim action 
action = request("action") 
Select case action 
case"" 
"订单 信息 回 显 … 
case "shopl" 
' 用 户 填写 收 货 信息 … 
case "shop2" 
"订单 提交 代码 ,发 票 信息 … 
case "ok" 
' 订 单 生成 代码 … 
end select 
%> 


任务 6 编写 订单 查询 页 面 


任务 背景 
订单 生成 后 用 户 应 该 能 够 查看 订单 处 理 状态 和 详细 信息 等 内 容 。 
任务 要 求 


订单 查询 页 面 需要 显示 订单 的 基本 信息 ,用 户 单 击 订单 号 后 可 以 查看 订单 的 详细 信息 。 

【技术 要 领 】 通 过 超 链 接 带 参数 形式 把 订单 号 传递 到 订单 详细 页 面 , 实 现 订 单 详细 信息 
的 显示 。 

【解决 问题 】 订 单 信息 提取 与 显示 。 

【应 用 领域 】 订 单 信息 提取 与 显示 。 

效果 图 

订单 查询 页 面 的 效果 如 图 12-8 和 图 12-9 所 示 。 

任务 分 析 

由 于 用 户 需 要 查看 订单 状态 ,所 以 可 以 提供 下 拉 菜 单 的 方式 让 用 户 选择 订单 状态 。 
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图 12-8 ”订单 查询 页 面 
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图 12-9 订单 详细 页 面 


重点 和 难点 
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& 


用 户 选 择 订单 状态 后 订单 查询 页 面 的 结果 显示 。 


操作 步骤 


(1) 制作 mydingdan. asp 网 页 ,在 网 页 中 输入 如 下 代码 。 


<%(@LANGUAGE = "VBSCRIPT" CODEPRGE = "936" %> 
<! —— #include file = "conn.asp" -一 > 


<html > 
<head > 


<title> 订 单 查询 </title> 


</head> 
<body> 


<table width= "90%" border = "0" align = "center" cellpadding = "0" cellspacing= "1"> 


<tr> 


<tdwidth="100%" align = "right">< img src =" images/mingle/state. gif" width = "20" height = 
"18" /> 请 选择 查找 不 同 状态 下 的 订单 

<select name = "zhuangtai" onChange = "var jmpURL = this. options[this. selectedIndex]. value ; 
if(jmpURL! = '') {window. location = jmpURL; } else {this. selectedIndex=0 ;}" > 
< option value = "mydingdan. asp? zhuangtai = 0&dingdan = <$ = request. QueryString( " dingdan") % >" 
selected >== 请 选择 查询 状态 == </option> 
< option value = "mydingdan. asp? zhuangtai = 0&dingdan = <% = request. QueryString("dingdan") %$>" > 


全 部 订单 状态 </option> 

< option value = "mydingdan. asp? zhuangtai = 1&dingdan = <% = request. QueryString( "dingdan") %>" > 
未 做 任何 处 理 </option> 

“这 里 省 略 了 其 他 订单 状态 选项 代码 
</select > 

</td> 

</tr> 

</table> 

… 这 里 省 略 了 订单 显示 代码 
</body> 

</html > 


(2) 运行 结果 如 图 12-8 所 示 。 
(3) 制作 order. asp 网 页 ,该 网 页 显示 订单 的 详细 信息 ,详细 代码 在 此 省 略 。 运 行 结果 


如 图 12-9 所 示 。 
代码 说 明 : 


订单 状态 选择 的 思路 总 体 如 下 。 
(1) 首先 将 目的 网 页 地 址 放 入 下拉 菜 单 各 选择 项 value 属性 中 。 


mydingdan. asp?zhuangtai = 0&dingdan =<% = request. QueryString( "dingdan") %> 


(2) 然后 在 订单 选择 下 拉 菜 单 的 onChange 函数 中 加 入 如 下 代码 。 


var jmpURL = this. options[this. selectedIndex]. value ; 
if( jmpURL! = '') {window. location = jmpURL; } else {this. selectedIndex=0 ;} 


(3) 当 在 图 


12-8 中 下 拉 菜 单 中 选择 订单 的 不 同 状态 时 ,第 二 步 中 的 代码 实现 当前 网 页 


的 跳 转 , 跳 转 的 目的 网 页 即 为 第 一 步 设 定 的 各 选择 项 的 值 。 这 里 仍然 跳 转 到 本 网 页 ,但 网 页 
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过 
后 附加 的 参数 可 以 筛选 出 不 同 处 理 状态 的 订单 。 
任务 7 集成 支付 宝 在 线 支付 功能 


任务 背景 

电子 商务 网 站 通常 需要 实现 在 线 支付 功能 ,而 支付 宝 是 目前 市 场 占有 率 最 高 的 第 三 方 
在 线 支 付 平台 ,因此 集成 支付 宝 在 线 支 付 功能 就 很 有 必要 。 

任务 要 求 

将 支付 宝 的 及 时 到 账 功能 集成 到 本 网 站 ,实现 网 站 的 在 线 支付 功能 。 

【技术 要 领 】 签 约 支付 宝 账号 和 支付 宝 功能 集成 。 

【解决 问题 】 网 站 的 在 线 支付 。 

【应 用 领域 】 网 站 的 在 线 支付 。 

效果 图 

当 用 户 单 击 图 12-2 浏览 商品 界面 中 的 “支付 宝 " 按 钮 后 ,在 线 支付 效果 如 图 12-10 和 
图 12-11 所 示 。 


卫 支付 宝 印 时 到 帐 付款 快速 通道 - Wi ereseft Internet Kxplorer 
文件 四 编辑 到 查看 中 收 苦心) 工具 上 帮助 轴 ) 


所 : 目 因 国 的 妆容 x 加 辐 - 生 国 : 首 衣 回 


击 让 由) | 秋 http://1oeuhoztwsbxite_spp/ygeahop/js_srp_ 直 /indax_ sp76oodID=60co 坟 me= 台 电 UAric | 加 各 到“ 避 六 ”三 半 执 -的 达 择 
支付 宝 即时 到 帐 付款 快速 通道 


收 蒜 方 ，， 易 购 商 城 
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图 12-10 支付 宝 即时 到 账 付款 快速 通道 


任务 分 析 

本 任务 首先 需要 商家 建立 一 个 可 供 正常 访问 的 电子 商务 网 站 ; 然后 再 到 支付 宝 网 站 
签约 一 个 支付 宝 账号 ; 最 后 下 载 支付 宝 集成 文档 ,利用 签约 支付 宝 账号 集成 在 线 支 付 
功能 。 

重点 和 难点 

支付 宝 功能 的 集成 。 
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我 有 支付 宝 旦 户 ， 到 松 付款 : 我 没 支付 宝 账户 ， 也 能 付款 : 


支付 宝 克 持 国 内 二 一 多 床 主流 机 行 与 机 交 的 绪 匣 卡 、 届 用 卡 的 同上 付款 。 
直击 “下 一 步 ”， 过关 要 行 ] 


YE] SR PS? +， 完 忆 


支付 客 码 : 找 辐 交付 客 码 部 箱 歌手 机 号 : 让 


本 镶 入账 记 的 去 计 窗 码 。 不 是 并 录 窑 


| 用 支付 宝 几 户 付 数 | 


支付 宝 豚 权 所 有 2004-2011 ICP 让 : 朵 B82-20050209 
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图 12-11 支付 宝 网 上 支付 


操作 步骤 

(1) 商家 到 出 租 网 络 虚拟 空间 和 域名 的 网 站 申请 相应 的 空间 和 域名 ,将 自己 提前 做 好 
的 电子 商务 网 站 上 传 到 相应 的 网 络 空间 ,并 保证 能 正常 访问 。 当 然 也 可 以 用 自己 的 服务 器 
直接 发 布 网 站 。 

(2) 商家 用 自己 已 经 申请 的 支付 宝 账号 登录 支付 宝 官方 网 站 (www. alipay. com) ,并 进 
人 “商家 服务 "栏目, 里面 有 多 种 针对 不 同 商家 的 产品 ,如 图 12-12 所 示 。 

(3) 这 里 选择 针对 普通 网 站 的 “即时 到 账 收 款 ” 产 品 ,申请 时 需要 用 户 填写 相关 资料 ,如 
商家 信息 、 公 司 规模 和 网 址 等 信息 ,提交 信息 后 几 个 工作 日 内 即 可 获得 审核 结果 。 

(4) 审核 通过 后 在 “我 的 商家 服务 ”选项 中 可 以 查询 商家 “合作 者 身份 ID (PID)” 和 *“ 安 
全 检验 码 (Key)”, 如 图 12-13 所 示 。 其 中 “合作 者 身份 1D" 是 以 2088 开头 的 16 位 纯 数字 ， 
如 “2088002681286679”。 而 “安全 检验 码 ” 是 以 数字 和 字母 组 成 的 32 位 字符 串 , 如 
“3kedlxfn7wu6ya6i9h4tzey45hpd5v89”。 

(5) 商家 再 从 支付 宝 网 站 下 载 相应 版 本 的 支付 宝 集成 文档 中 ,利用 签约 支付 宝 账号 、 
“合作 者 身份 ID” 和 "安全 检验 码 ” 等 信息 集成 在 线 支付 功能 。 

(6) 在 下 载 的 ASP 版 的 支付 宝 接 口中 有 一 个 网 页 文件 alipay_config. asp。 该 文件 用 于 
配置 商户 的 基本 信息 ,这 些 基 本 信息 如 下 所 示 。 

' 合 作者 身份 ID, 以 2088 开头 的 16 位 纯 数字 

partner = "2088002681286672" 

' 安 全 检验 码 ,以 数字 和 字母 组 成 的 32 位 字符 串 


下 
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图 12-13 查询 合作 者 身份 ID 和 安全 校 验 码 
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key = "1kedlxfn7wu6ya6i9h4tzey45hpd5v89" 

' 签 约 支付 宝 账号 或 卖家 支付 宝 账户 

seller email = "wudaiwen1022(@163.com" 

' 交 易 过 程 中 服务 器 通知 的 页 面 ,要 用 http:// 格 式 的 完整 路 径 , 不 允许 加 ?id= 123 这 类 自 定义 参数 
notify url = "http://www.xxx.com/js_asp gb/notify url.asp" 

' 付 完 款 后 跳 转 的 页 面 要 用 http:// 格 式 的 完整 路 径 , 不 允许 加 ?id= 123 这 类 自 定义 参数 

return url = "http://www.xxx.com/js_asp_gb/return_url.asp" 

'return_url 的 域名 不 能 写成 http://1localhost/js_asp_gb/return_url.asp, 否则 会 导致 return_url 
' 执 行 无 效 

' 网 站 商品 的 展示 地 址 ,不 允许 加 ?id= 123 这 类 自 定义 参数 

show url = "http://www. wudaiwen. com" 

' 收 款 方 名 称 ,如 : 公司 名 称 、 网 站 名 称 、 收 款 人 姓名 等 

Mainname = " 易 购 商城 " 


(7) 填写 完 商 家 基本 参数 后 ,只 需要 将 图 12-2 浏览 商品 界面 中 的 商品 的 相关 参数 传递 
到 如 图 12-10 所 示 的 网 页 即 完成 了 在 线 支付 的 集成 。 图 12-10 所 对 应 的 网 页 文件 为 ASP 版 
的 支付 宝 接口 中 的 index. asp, 商 家 可 以 根据 自己 的 需要 修改 这 一 网 页 。 


知识 点 拓展 


[1] HTTP 是 基于 无 连接 的 通信 协议 ,无 法 在 用 户 浏览 网 页 期 间 跟 踪 用 户 。ASP 提供 
Session 对 象 用 于 管理 用 户 会 话 , 当 一 个 用 户 在 Web 站 点 的 多 个 页 面 间 切 换 时 ,使 用 
Session 对 象 可 以 保存 用 户 的 相关 信息 ,使 该 用 户 在 访问 网 站 时 信息 能 够 共享 。 

利用 Session 存储 信息 其 实 很 简单 ,可 以 把 变量 或 字符 串 等 信息 很 容易 地 保存 在 
Session 中 。 


设置 Session 的 语法 : 


Session( "Session 名 字 ") = 变量 或 字符 串 信息 
获取 Session 信息 的 语法 : 
变量 = Session("Session 名 字 ") 


[2] Dictionary 对 象 用 于 在 结对 的 名 称 / 值 中 存储 信息 (等 同 于 键 和 项 目 )。Dictionary 
对 象 看 起 来 比 数组 更 为 简单 .但 其 处 理 关联 数据 的 效果 却 比 数组 更 好 。 
Dictionary 对 象 的 常用 属性 如 表 12-3 所 示 。 


表 12-3 Dictionary 对 象 常用 属性 


属 性 描 述 
CompareMode 设置 或 返回 用 于 在 Dictionary 对 象 中 比较 键 的 比较 模式 
Count 返回 Dictionary 对 象 中 键 /项 目 对 的 数目 
Item 设置 或 返回 Dictionary 对 象 中 一 个 项 目的 值 


Key 为 Dictionary 对 象 中 已 有 的 键 值 设置 新 的 键 值 
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Dictionary 对 象 的 常用 方法 如 表 12-4 所 示 。 
表 12-4 Dictionary 对 象 常用 方法 


方 法 描 述 
Add 向 Dictionary 对 象 添加 新 的 键 /项 目 对 
Exists 返回 一 个 逻辑 值 ,这 个 值 可 指示 指定 的 键 是 否 存 在 于 Dictionary 对 象 中 
Items 返回 Dictionary 对 象 中 所 有 项 目的 一 个 数组 
Keys 返回 Dictionary 对 象 中 所 有 键 的 一 个 数组 
Remove 从 Dictionary 对 象 中 删除 指定 的 键 /项 目 对 
RemoveAll 删除 Dictionary 对 象 中 所 有 的 键 /项 目 对 


[3] Select … Case 语句 的 语法 如 下 。 


Select Case 变量 或 表达 式 
Case 结果 1 

执行 语句 1 
Case 结果 2 

执行 语句 2 


Case 结果 n 
执行 语句 n 
Case Else 
执行 语句 n+1 
End Select 
在 Select … Case 语句 中 ,首先 对 表达 式 进行 计算 (可 以 是 数学 计算 或 字符 串 运算 ), 然 
后 将 运算 结果 依次 与 结果 1 至 结果 n 做 比较 。 如 果 找 到 相等 的 结果 , 则 执行 该 Case 语句 中 
的 语句 ; 如 果 未 找到 相等 的 结果 , 则 执行 Case Else 语句 后 面 的 执行 语句 。 最 后 退出 Select 
Case 语句 。 运 用 Select … Case 语句 实现 的 功能 相当 于 内 套 使 用 If 语句 实现 的 功能 。 
[4] 支付 宝 集成 文档 的 版 本 有 ASP、PHP、JAVA、ASP. NET(C#) 和 ASP. NET(VB) 
等 ,可 以 满足 各 种 不 同 Web 服务 器 下 建设 网 站 时 集成 支付 宝 在 线 支 付 功能 的 需要 。 本 书 使 
用 的 是 ASP 版 支付 宝 集成 文档 ,集成 的 支付 宝 接口 为 "即时 到 账 收 款 ”。 该 集成 文档 再 按 支 
持 网 页 编码 语言 细 分 为 GB2312 和 UTF-8 两 个 子 版 本 ,其 中 支持 GB2312 语言 的 集成 文档 
的 结构 如 下 。 
js_asp gb 
| 
Helass 一 一 一 一 一 一 一 一 一 一 一 一 类 文件 夹 
JE | 
| ”Falipay_function.asp- 一 一 一 公用 函数 类 文件 
| 1 
| ”Falipay_md5.asp -一 一 一 一 一 MD5 类 文件 
| 1 
| alipay_notify.asp 一 一 一 一 支付 宝 通知 处 理 类 文件 
| 
| 
| 


| 
Lalipay_service. asp -一 一 一 支付 宝 请 求 处 理 类 文件 
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& 


Fimages 一 一 一 一 一 一 一 一 一 一 图 片 .CSS 样式 文件 夹 
,3 
Falipay_config. asp 一 一 一 -一 一 一 基础 信息 配置 文件 

Hal ipayto. asp 一 一 一 一 一 一 一 一 支付 宝 接口 人 口 文件 

上 index. asp 一 一 一 一 一 一 一 一 一 一 快速 付款 人 口 模板 文件 
Fnotify_url.asp -一 一 一 一 一 一 一 服务 器 异步 通知 页 面 文件 
Freturn_url.asp -一 一 一 一 一 一 一 页 面 跳 转 同步 通知 文件 
Lreadme. txt -一 -一 -一 一 一 一 -一 -一 -一 使 用 说 明文 本 


商家 在 建立 自己 的 网 站 并 签约 支付 宝 账号 后 ,只 需 把 自己 的 相关 信息 写 和 人 alipay_ 
config. asp 网 页 即 可 轻松 集成 支付 宝 * 即 时 到 账 付款 功能。 其 他 接口 功能 的 集成 过 程 与 任 
务 7 基本 相似 ,商家 可 以 自己 尝试 或 请 求 支付 宝 公司 的 技术 支持 。 


实 训 利用 Cookie 制作 一 个 简单 的 购物 车 


实 训 目的 

通过 上 机 编程 ,让 学 生 学 会 利用 Cookie 制作 一 个 简单 的 购物 车 。 
实 训 内 容 

利用 Cookie 制作 一 个 简单 的 购物 车 。 

实 训 过 程 


Cookie 存储 在 用 户 客户 端 ,因此 用 Cookie 制作 购物 车 可 以 减轻 服务 器 负担 。 本 实 训 
没有 使 用 数据 库 , 只 需 制 作 以 下 三 个 页 面 .各 个 页 面 名 字 及 功能 如 下 。 

index. asp: 展示 所 有 商品 信息 , 供 购 买 者 浏览 和 购买 。 

cartshow. asp: 购物 车 页 面 , 当 购买 者 选 购 商品 后 在 此 页 面 显示 。 

result. asp: 购买 提交 后 的 结果 页 面 . 显 示 订 单 最 终 信息 。 

(1) index. asp 页 面 的 代码 如 下 所 示 。 


<% dession("usernane") = "yegou" %> 
<title> 基 于 Cookie 的 购物 车 首页 </title> 
< table width= "400" height = "153" align= "center" border = "0" cellpadding = "0" cellspacing= "0"> 

<tr> 

<td height = "93">< img src = "image/jsd4g. jpg" width = "100" height = "100" /></td> 

"image/lianxiang4g. jpg" width = "100" height = "100" /></td> 

<td>< img src = "image/sony4g. jpg" width = "100" height = "100" /></td> 

<td>< img src = "image/sandisk4g. jpg" width= "100" height = "100" /></td> 
</tr> 


<td>< img src= 


[ra 
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写 


<tralign= "center"> 

<td height = "27"> 

< input type = " image" src = " image/buy. gif” name = "Submit"” value = "购买 " onClick = 
"writeCookie( '<% = session("username") %>', '1', ' 金 十 顿 46B', '1',50)" /></td> 

<td> 

< input type = " image" src = " image/buy. gif” name = "Submit"” value = "购买 " onClick = 
"writeCookie( '<% = session("username") %>', '2', ' 联 想 4GB', '1',55)" /></td> 

<td> 

< input type = " image" src = "image/buy. gif” name = "Submit" value = "购买 " onClick = 
"writeCookie( '<% = session("username") %>', '3', ' 索 尼 4GB', '1',60)" /></td> 

<td> 

< input type = " image" src = "image/buy. gif” name = "Submit” value = "购买 " onClick = 
"writeCookie( '<$% = session("username") % > '4', ' 内 迪 46B', '1',65)" /> 


</td> 
</tr> 
<tr><td align = "center" colspan = "4"><a href = "cartshow.asp"> 去 埋单 </a></td></tr> 
</table> 
< script language = "javascript"> 


>. 
function writeCookie(name, ID, pro, num, pri) 
{ 
var test = false; 
var values ="," + escape(ID) + "#" + escape(pro) + "#" + escape(num) + "#" + 
escape(pri); 
var cookieValue = readCookie(name); 
sss= cookieValue. split(",") 
for (i=0;i<sss.length;i++){ 
s= sss[i].split("#"); 
for(j=0;j<s.length;j++){ 
if(s[0] == ID) 
{ 


cookieValue = cookieValue. replace("," + sss[i],""); 


nums = s[2]; 
test = true; 
alert( "你 已 经 购买 过 些 物品 ,将 只 在 数量 上 添加 !); 
break; 
} 
} 
} 
if (test) 
{ 
document. cookie = name + "=" + cookieValue+ "," + escape(ID) + "#" + escape 


(pro) + "#" + escape(parseInt(num) + parseInt(nums)) + "#" + escape(pri); 
test = false; 


} 

else 
document.cookie = name + "=" + cookieValue + values; 
alert ( ' 购 买 成 功 '); 

} 
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function readCookie(name) 
{ 
Var cookieValue = ""; 


Var search = name + "="; 


if(document. cookie. length > 0) 
{ 
offset = document. cookie. indexOf (search); 
if (offset != -1) 
{ 
offset += search. length; 
end = document. cookie. indexOf(";", offset); 
if (end == 一 1) end = document. cookie. length; 
cookieValue = document. cookie. substring(offset, end) 


} 

return cookieValue; 
} 
= 
</script > 


(2) cartshow. asp 页 面 的 代码 如 下 所 示 。 


< html xmlns = "http://www. w3. org/1999/xhtml"> 

<head > 

< meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title> 您 的 所 购物 品 </title> 

< Script language = "javascript"> 

ws 

//name 购物 车 名 称 , readCookie(name) 函数 返回 已 购买 的 所 有 内 容 ,包括 物品 名 ,物品 单价 ,物品 
// 名 称 ,物品 数量 

function readCookie(name) 

{ 


var cookieValue = 


了 


Var search = name + "="; 
证 (document. cookie. length > 0) 
{ 
offset = document. cookie. indexOf (search); 
if (offset != -1) 
{ 
offset += search. length; 
end = document. cookie. indexOf(";", offset); 
if (end == —1) end = document. cookie. length; 
cookieValue = document. cookie. substring(offset, end) 


} 
return cookieValue; 


} 
//stringToInteger(inputString) 函数 返回 由 字符 串 (inputString) 转 换 所 得 到 的 整数 
function stringToInteger (inputString) 

return parseInt( inputString); 
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} 
//isNotaNumber( inputString) 函 数 返 回 一 个 Boolean 值 ,指明 inputString 是 否 是 保留 值 NaN( 不 
// 是 数字 ) 
function isNotaNumber (inputString) 
{ 
return isNaN( inputString); 
} 
//UpdateCookie(name，value) 阴 数 更 新 Cookie 内 容 
function UpdateCookie(name, Ids) 
{ 
Var buy_num = document. getElementById( Ids); 
value = buy_num. value; 
s=value. split("#"); 
value = escape(s[0]) + "#"+escape(s[1]) +"#"+escape(s[2])+"#"+escape(s[3]) 
var ww =""; 
wv = readCookie(name) ;// 返 回 所 有 购买 的 内 容 
wv =vwv. replace(', '+ value, "");// 把 要 删除 的 内 容 和 其 前 面 的 "," 一 起 置 空 
document. cookie = name + "= "+ vvv;// 再 把 新 的 内 容 写 人 Cookie 里面 
} 
//ModifyCookie(name,，valuex，ID，pro, num，pri) 卫 数 修 改 内 容 , valuex 为 修改 前 的 内 容 ， 
//valuel - value4 为 修改 后 的 内 容 
function ModifyCookie(name, valuex, ID, pro, num, pri) 
下 
var vvv= 
wwv= readCookie(name) ;// 返 回 购买 的 所 有 内 容 , 包 括 物品 ID, 物品 名 称 ,物品 数量 ,物品 单价 
S= valuex. split("#"); 
valuex = escape(s[0])+"#"+escape(s[1]) +"#"+escape(s[2])+"#"+escape(s[3]) 
vv = vwv. replace(', '+ valuex,"");// 把 要 修改 的 内 容 去 掉 
document. cookie = name + "=" + vw + "," + escape(ID) + "#" + escape(pro) + "#"+ 
escape(num) + "#" + escape(pri); 
location. href = 'cartshow. asp'; 
} 
// 清 除 Cookie 
function clears() 


document. cookie = "<% = session("username") %>"+"="; 
window. location. href = 'cartshow. asp'; 
} 
// 显 示 价 格 
function AllPrice(num) 
{ 
Var All = document. getElementById("all" ); 
All. innerHTML = num; 
} 
-—> 
</script > 
</head> 
<body> 
<table width = " 800" border = "1" align = "center" cellpadding = " 0" cellspacing = "0" 
bordercolorlight = " #00A600" bordercolordark = " #FFFFFF"> 
< form name = "buyForm" action= "result.asp”method = "post" target ="_self"> 
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<tr> 
<td align = "center">< img src = "image/title_ico 01. gif" alt = "购物 车 ”width = "165" 
height = "68" /></td> 
</tr> 
<tr> 
<td height = "25">< img src = "image/Buy ico.gif" width= "26" height = "17" /> gnbsp; &nbsp; 
所 有 商品 总 价 snbsp;< span id = "all" style = "color: #FF0000;"></span > 元 &nbsp; &nbsp; &nbsp; 
gnbsp;< span style = "cursor:hand;" onClick = "clears();"> 清 空 购物 车 </span> 
<table width= "100%" border = "0" cellspacing = "0" cellpadding = "0"> 
<tr> 
<td width="4%" height = "25" align = "center" class = "tb tb"> 序 号 </td> 
<td width = "44$ "align = "center" class = "tb _tbl"> 物 品名 称 </td> 
<td width = "12$%" align = "center”class = "tb _ tbl"> 物 品 数量 </td> 
<td width= "15% "align= "center" class = "tb tbl"> 物 品 单价 /元 </td> 
<td width = "16$%" align = "center" class = "tb tbl"> 物 品 总 价 / 元 </td> 
<td width = "9$ "align = "center" class = "tb tbl"> 操 作 </td> 
</tr> 
<% 
if session("username")<>"" then 
buylist = request. Cookies( session("username"))' 返 回 name 为 session("username") 
' 的 cookie 的 内 容 
buylist v= split(buylist, ",")' 用 ", "把 它们 分 开 
for x=1 to ubound(buylist_v) 'ubound 返回 在 buylist_v 数组 最 大 的 维 数 ,VBS 数 
' 组 下 标 为 0( 开 始 ) 
buylist_v_v= spl 让 (buylist_v(x)，" 并 ") "buylist_v_v 为 第 一 组 数 , 即 第 x 次 购物 的 


"内 容 
buylist_v_ x= buylist_v(x)"buylist_v_ x 为 第 x 次 购物 的 内 容 , 与 baylist_v(x) 同 
if buylist_v(x)<>"" then' 判 断 第 x 购物 内 容 是 否 为 空 
if(ubound(buylist_v_v))< 3 then 
response. write("< script > alert(' 出 现 错误 '); document. cookie = """ 
&session("username")&""" + """ = """ilocation.href = 'cartshow. asp';</script >") 
response. End( ) 
end if 
ProID= buylist_v_v(0)' 有 4 个 内 容 读 4 次 ,这 个 为 物品 ID 
ProName = buylist_v_v(1)' 这 个 为 物品 名 称 
ProNum = buylist_v_v(2) ' 这 个 为 物品 数量 
ProPrice = buylist_v_v(3) ' 这 个 为 物品 单价 
AllPrice= AllPrice + (ProNum* ProPrice) 
%> 
< tr onMouseOver = "this. style. backgroundColor = '#FOFFEC'" onMouseOut = "this. style. 
backgroundColor = ''"> 
<td height = "25" align= "center” class = "tb b"><% =x%> 
< input type = "hidden" name ="ID <% =x%>" id="ID <% =x%>" value = "< 多 
ProID%>" /></td> 
<tdalign="center"” class= "tb bl">&nbsp;<% =ProName%> 
< input type = "hidden" name = "buy <% =x%>" id= "buy <% =x%>" value = "<% 
buylist v(x)%>" /></td> 
<tdalign="center"” class= "tb bl"> 
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< input name = "num <% =x%>" type= "text" onChange = "if(isNotaNumber(this. value) 
== true) {alert( ' 请 输入 整数 数字 ');this. value = 1;}else{this. value = stringToInteger (this. 
value);} ;ModifyCookie('<% = session("username") %$>', '<$% =buylist v(x)%>','<% =ProID%>', 
'<% =ProName% >', this. value, '<% = ProPrice%>');" value = "< 和 当 = ProNum% >" size = "10" 
maxlength= "5" /></td> 
<tdalign="center" class = "tb bl"> gnbsp;<% =ProPrice%> 
< input type= "hidden" name = "pri <% =x$%>" id= "pri <% =x$%>" value = "< 和 = 
Proprice%>" /></td> 
<td align = "center" class="tb bl"> &nbsp;<% = ProPrice x* ProNum%></td> 
< td align = "center"” class = "tb bl">< img src = "image/quit. gif" width = "48" 
height = "20" id = "quit”name = "quit”value = "放弃 " onClick = "UpdateCookie('<% = session 
("username") %>', 'buy <% =x%>');location. href = '?3';" /></td> 
</tr> 
<% 
end if 
next 
response. write( "< script > AllPrice( '"&AllPriceg"');</script >") 
end if 
%> 
</table> 
</td></tr> 
<tr> 
<td height = "25" align= "center" style= "display:block; vertical - align:middle;"> 
< input type = "image" value = "提交 " src = "image/okay. gif" width= "60" height = "25" /> 
Snbsp;< img src = "image/cancel. gif" width= "60" height = "25" border = "0" title = "取消 " 
‘onClick = "clears();" /> 
</td> 
</tr> 
</form> 
</table> 
<p align = "center"><a href = 
</body> 
</html > 


(3) result. asp 页 面 的 代码 如 下 所 示 。 


index.asp"> 返 回 购物 </a></p> 


<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %> 
<html xmlns = "http://www. w3. org/1999/xhtml"> 
<head > 
< meta http - equiv = "Content - Type" content = "text/html; charset = gb2312" /> 
<title > 结果 </title> 
</head> 
<body> 
<palign= "center"> 
<% 
nums = request. Form. count 


' 循 环 读 出 提交 过 来 的 物品 ID 和 数量 ,价格 
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"当然 这 里 也 可 以 从 数据 库 提 取 商 品 价格 ,然后 再 将 用 户 的 订单 信息 存 人 数据 库 中 
for i=1 to int(nums) 
id = request. Form("ID "&i) 
num = request. Form("num "&i) 
pri = request.Form("pri "&i) 
price= price+ (prix num) 
next 
response. write(" 总 共 :"&price&" 元 ") 
%> 
</p> 
<palign= "center"><a href = "index. asp"> 返 回 购物 </a > gnbsp; Snbsp; Snbsp; Snbsp; gnbsp; <a 
href = "cartshow. asp"> 返 回 结算 </a></p> 
</body> 
</html > 


(4) 本 购物 车 运行 效果 如 图 12-14 一 图 12-16 所 示 。 


马 基于 Cookie 的 购物 车 首页 - Microsoft Internet Explorer 
文件 @) 编辑 E) 查看 中 收 总 WW) 工具 中 帮助 0 


四 银 - 回国 国 的 万 时 广 tax 加 富生 


地 让 四 图 http://1ocalhost/website_spp/chapter12/shixun/index. asp 


图 12-14 商品 展示 页 


沁 你 的 所 购物 品 - Nicrosoft Internet Explorer 
文件 中 编辑 EE) 查看 中 收 总 &) 工具 CD) 帮助 中 


名 -日 因 因 多 有 时 广 tax 加 内: 学 


地 址 加 ) 逢 http /locslhost/website_app/chapter12/shixun/ cartshor. asp 


利用 Cookie 实 现 的 购物 车 
所 有 商品 总 价 170 元 
物品 名 称 


图 12-15 基于 Cookie 的 购物 车 


507 


0 
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全 


下 结果 - Micresoft Internet Explorer 
文件 编辑 EE) 查看 G) 收 总 4) 工具 QD) 帮助 0D 


@ 色 -上 日 国 国 的 并 六 x 加 全 -对 国 -加 


地 泪 加 | 图 http://1ocalhostjwebsite_app/chapteri2/shixon/resolt. asp SE 


总 共 :170 元 


购物 


图 12-16 提交 订单 页 


实 训 总 结 


本 实 训 的 主要 目的 是 让 学 生 学 会 利用 Cookie 制作 一 个 简单 的 购物 车 。 通 过 这 一 实 训 
能 够 让 学 生体 会 利用 Cookie 和 Session 十 Dictionary 两 种 方法 制作 购物 车 的 区 别 。 


综合 任务 


1. 利用 本 章 所 学 知识 设计 和 实现 一 个 简单 购物 车 。 

2. 利用 Select…Case 多 分 支 结构 在 一 个 ASP 网 页 中 实现 一 个 简单 的 在 线 考试 ,要 求 
分 多 步 呈现 考试 题 ,最 后 一 步 给 出 考试 成 绩 。 

3. 自 建 一 个 简单 电子 商务 网 站 ,然后 尝试 利用 支付 宝 接口 文件 集成 支付 宝 在 线 支付 
功能 。 


网 站 测试 发 布 与 宣传 推广 


网 站 系统 制作 完成 以 后 ,并 不 能 直接 投入 运行 ,而 必须 进行 全 面 ,完整 的 测试 ,包括 本 地 
测试 .网 络 测试 等 多 个 环节 。 本 模块 主要 讲解 网 页 测试 、 网 站 发 布 管理 和 网 站 宣传 推广 等 方 
面 内 容 , 通 过 学 习 读 者 将 掌握 本 地 站 点 的 测试 上 传 和 宣传 推广 等 内 容 。 

能 力 目标 

1. 能 对 网 页 进行 浏览 器 兼容 性 测试 

2. 能 对 网 页 和 网 站 进行 链接 测试 

3. 能 利用 CuteFTP 进行 网 站 的 发 布 和 上 传 

知识 目标 

1. 常用 的 网 页 测试 方法 

2. 常见 搜索 引擎 网 站 的 登录 入 口 


知识 储备 


知识 1 网 站 测试 内 容 及 方法 


网 站 系统 的 设计 开发 人 员 一 旦 完成 网 站 的 设计 开发 工作 之 后 ,都 必须 保证 所 有 网 站 系 
统 的 组 成 部 分 能 够 配合 起 来 ,协调 有 序 地 正常 工作 。 因 此 ,网 站 系统 的 测试 工作 十 分 重要 。 
1. 测试 的 内 容 
(1) 浏览 器 的 兼容 性 测试 。 对 不 同 浏览 器 的 测试 ,就 是 在 不 同 浏览 器 和 不 同 的 版 本 下 ， 
测试 网 页 的 运行 和 显示 状况 。 在 实际 工作 中 ,用 户 会 使 用 不 同 的 浏览 器 登录 互联 网 ,通过 此 
项 测试 和 修改 ,可 以 保证 网 页 在 大 多 数 的 浏览 器 中 都 能 正确 显示 。 既 给 出 网 页 在 IE 浏览 器 
和 Netscape 浏览 器 下 的 显示 报告 ,也 详细 统计 了 网 页 中 哪些 HTML 语法 不 被 浏览 器 支持 
以 及 改善 的 建议 。 

(2) 操作 系统 测试 。 测 试 在 不 同 的 操作 系统 下 ,网 页 显示 效果 是 否 一 致 。 

(3) 分 辩 率 测试 。 测 试 显 示 器 在 1024X768 像素 与 800X600 像素 情况 下 网 页 有 哪些 
变化 。 

(4) HTML 语法 检查 。 不 正确 的 HTML 语法 会 影响 浏览 器 的 编译 速度 ,而且 可 能 会 
导致 页 面 在 容错 性 差 的 浏览 器 中 出 错 。 

(5) 链接 情况 检查 。 帮 助 检查 页 面 上 所 有 链接 是 否 正确 ,有 没有 死 链 接 。 当 页 面 创建 
了 很 多 链接 时 ,用 它 来 帮助 检查 链接 的 正确 性 。 
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(6) 下 载 时 间 测 试 。 测 试 网 页 在 不 同 连 接 速度 下 的 下 载 时 间 , 并 且 指 出 被 测试 页 面 所 
链接 的 文件 (图 片 文件 ,框架 页 面 样 式 表 文 件 及 脚本 文件 等 ) 中 哪个 过 于 庞大 。 
(7) 拼写 检查 。 检 查 网 页 上 的 中 英文 文法 错误 。 
2. 测试 的 方法 
常用 的 网 页 测试 方法 如 表 13-1 所 示 。 


表 13-1 网 页 测试 方法 


测试 类 型 测试 方法 
浏览 器 测试 使 用 Dreamweaver 中 的 “结果 ”面板 
操作 系统 测试 在 不 同 操作 系统 下 测试 
分 辩 率 测试 在 操作 系统 中 调整 分 辩 率 
HTML 语法 检查 使 用 Dreamweaver 中 的 “命令 ”一 “清理 HTML? 命 令 
链接 情况 检查 使 用 Dreamweaver 中 的 “结果 ”面板 
下 载 时 间 测 试 将 网 页 上 传 、 下 载 测试 
拼写 检查 使 用 Dreamweaver 中 的 “文本 "一 “检查 拼写 "命令 


知识 2 不 同 浏览 器 的 测试 

在 不 同 的 浏览 器 和 相同 浏览 器 的 不 同 版 本 下 ,测试 页 面 的 运行 和 显示 情况 。 在 
Dreamweaver 中 能 将 测试 出 来 的 错误 或 可 能 出 现 错误 的 地 方 列 出 一 个 报告 单 ,根据 报 告 单 
的 提示 进行 网 页 的 修改 和 处 理 , 以 免 在 浏览 页 面 时 出 现 错误 。 

(1) 选择 菜单 “窗口 *1“ 结 果 ”1“ 浏 览 器 兼容 性 ”命令 ,打开 “浏览 器 兼容 性 ”面板 ,如 
图 13-1 所 示 。 


Bl Wt 性 
BP. 行 问题 亨 览 器 支持 问题 
有 
3 村 这 
日 
9 
Tsseyeaver 未 报告 的 呈现 问题 ”第 检查 Adobe con 


> 上 的 新 问题 妆 
图 13-1 “浏览 器 兼容 性 ?面板 


(2) 单 击 左 侧 的 绿色 三 角 符号 ,在 弹出 的 菜单 中 选择 设置", 弹出 “目标 浏览 器 ”对 话 
框 ,该 对 话 框 设置 的 是 选择 什么 样 的 浏览 器 和 以 哪个 版 本 作为 最 低 的 标准 ,如 图 13-2 所 示 。 
原则 是 选择 版 本 较 低 的 浏览 器 进行 测试 ,因为 新 版 本 浏览 器 一 般 都 支持 旧版 本 的 浏览 器 。 

(3) 单 击 “ 确 定 ” 按 钮 , 回 到 如 图 13-1 所 示 的 “浏览 器 兼容 性 ”面板 。 打 开 需 要 检查 浏览 
器 兼容 性 的 网 页 , 单 击 左 侧 的 绿色 三 角 符号 ,在 弹出 的 菜单 中 选择 “检查 浏览 器 兼容 性 ” 命 
令 。Dreamweaver 随即 对 该 网 页 的 浏览 器 兼容 性 进行 检查 。 

(4) 检查 完成 后 ,会 在 “浏览 器 兼容 性 ?面板 中 列 出 一 个 报告 单 , 如 图 13-3 所 示 。 该 报 
告 单 中 列 出 了 错误 项 、 警 告 项 和 有 可 能 出 现 的 错误 项 ,并 在 该 报告 的 后 面 列 出 了 出 现 错误 的 
具体 位 置 和 原因 。 
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Iaternet Explorer 
Taternet Explorer for Mla. 
etscape 

Dpers 

Safari 


盏 大 
回 
加 
回 
回 


图 13-2 目标 浏览 器 设置 


.搜索 | 参考 | 验证 | "所 吉 基 它 全 | 链接 检查 器 | 站 点 报告 | TTP 记 录 | 服 器 调 K 三 


了 | 行 问题 测 帘 器 支持 问题 
避 A 的 不 支持 的 值 ;“hand” | 不 支持 的 值 : “hand” 
回 @ 99 不 支持 的 值 :“hand” BRA]: Firefox 1.5, 2.0, 3.0: Internet Explore 
日 入 140 ”不 支持 的 什 : “middle” I 9 B.0; Internet Explorer for Wasintosh 5. 2 Sy 
EE 
a 在 Adobe. cow 上 了 解 更 多 与 浏览 器 中 的 CSS 支持 有 关 的 信息 。 
[< 一 一 一 


图 13-3 “浏览 器 兼容 性 "检查 结果 


知识 3 ”链接 测试 


链接 测试 主要 是 看 网 页 中 是 否 有 文件 名 不 正确 或 路 径 名 有 误 等 错误 的 超级 链接 ,包括 
页 面 .图 片 . 服 务 器 端 程序 等 。 该 测试 可 分 为 三 个 方面 : 测试 所 有 链接 是 否 按 指示 的 那样 确 
实 链接 到 了 应 该 链接 的 页 面 ; 测试 所 链接 的 页 面 是 否 存 在 ; 保证 Web 应 用 系统 上 没有 孤立 
的 页 面 ,所 谓 孤 立 页 面 是 指 没有 链接 指向 该 页 面 ,只 有 知道 正确 的 URL 地 址 才能 访问 。 链 
接 测试 的 方法 如 下 。 

(1) 打开 “结果 ”面板 组 中 的 “链接 检查 器 "面板 。 在 “显示 ”下 拉 列 表 框 中 可 以 选择 要 检 
查 的 链接 方式 ,如 图 13-4 所 示 。 选 择 “ 断 掉 的 链接 ”, 则 会 在 站 点 或 文档 中 检查 是 否 存 在 断 
掉 的 链接 。“ 外 部 链接 ” 则 会 显示 站 点 或 文档 中 的 外 部 链接 。“ 孤 立 的 文件 "只 在 检查 整个 站 点 
链接 的 操作 中 才 有 效 ,检查 站 点 中 是 否 存在 孤立 的 文件 , 即 没有 被 任何 链接 所 引用 的 文件 。 


图 13-4 ”检查 链接 方式 的 选择 


(2) 单 击 面板 左 侧 的 绿色 三 角 符号 ,在 下 拉 菜 单 中 选择 要 检查 的 范围 ,如 图 13-5 所 示 。 
选择 “检查 当前 文档 中 的 链接 ”, 则 弹出 显示 当前 文档 中 链接 检查 的 报告 单 。“ 检 查 整个 当前 
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室 


本 地 站 点 的 链接 "对 整个 站 点 进行 检查 。“ 检 查 站 点 中 所 选 文件 的 链接 " 则 是 可 以 针对 部 分 
文档 进行 检查 。 


链接 检查 器 
显示 (S): | 断 掉 的 链接 | (链接 文件 在 本地 辜 伪 没有 找到 ) 


立 件 二 断 撞 的 浪 接 | 


检查 整个 当前 本 地 站 点 的 链接 革 ) 
检查 站 点 中 所 选 文件 的 链接 CL) 人 @) 


图 13-5 检查 范围 的 选择 


(3) 若 检查 的 链接 方式 设置 为 "孤立 的 文件 ,选择 检查 的 范围 是 "检查 整个 当前 本 地 站 
点 的 链接 ”, 则 在 面板 中 显示 的 报告 单 如 图 13-6 所 示 。 


搜索 | 参 若 | 验证 | 训 览 器 划 容 性 | 六 扩 三 时 | 站 点 报告 | FTP 记 录 | 服务 器 调 二 于 
显示 (5): 设 有 进入 链接 的 文件 ) 

忆 [下 立 的 文件 el 
135 /chapter03/Formhtml 
[3 /chapter03/indexhtml 
[3 /chaptero3/insertFlash.html 
本 /chapter03yinsertFlvhtml 
chapter03/insertimg html 
本 /chaptero3/insertTable.html 


总 共 5353 个 ，1946 个 HTML，3110 个 孤立 文件 。 总 共 8320 个 链接 ，5447 个 正确 ，2329 个 断 盾 ，544 个 外 部 链接 
图 13-6 ”链接 检查 的 报告 单 


一 般 的 链接 检查 主要 是 检查 “孤立 的 文件 "和 * 断 掉 的 链接 ”"。 孤 立 文件 只 在 检查 整个 站 
点 时 才能 被 查 出 。 一 般 情 况 下 , 它 是 没 用 的 文件 (首页 以 及 库 和 模板 文件 除外 ) ,最 好 删除 
掉 , 方 法 是 : 在 孤立 文件 列表 中 选中 想 要 删除 的 孤立 文件 , 按 Delete 键 即 可 。 如 果 想 要 修改 
外 部 链接 ,可 先 在 “链接 检查 器 "面板 中 选中 该 外 部 链接 ,再 输入 一 个 新 的 链接 即 可 。 


知识 4 网 页 下 载 时 间 测 试 


同一 个 页 面 在 不 同 速率 的 Modem 下 其 下 载 速度 是 不 同 的 ,在 Dreamweaver 中 可 以 选 
择 不 同 速率 的 Modem 对 页 面 进行 测试 ,了 解 其 下 载 速度 ,看 是 否 需要 对 页 面 进行 修改 。 具 
体 测试 方法 如 下 。 

(1) 打开 需要 测试 的 页 面 ,选择 “编辑 ”菜单 下 的 “首选 参数 " 子 菜单 ,在 左 侧 的 “分 类 ”中 
选择 “状态 栏 ”, 在 右 侧 的 “连接 速度 ”下拉 列表 框 中 选择 Modem 的 速度 ,有 14. 4、28. 8、 
33.6.56.64.128 和 1500 共 7 个 参数 供 选择 ,如 图 13-7 所 示 。 

(2) 单 击 “确定 ? 回 到 页 面 编辑 状态 。 在 状态 栏 右 侧 就 会 出 现 一 个 数值 "91K/15 秒 ”。 
该 数值 表示 当前 文档 大 小 为 91KB. 大 概 需 要 15s 的 时 间 可 以 下 载 完 毕 。 修 改 一 下 Modem 
的 速度 ,设置 为 128, 则 状态 栏 数值 变 为 “91K/12 秒 ” ,表示 该 文档 只 需要 大 概 12s 的 时 间 就 
可 下 载 完成 。 

当然 ,在 正式 的 网 站 开发 项 目 中 ,网 站 的 测试 则 要 更 专业 。 包 括 需求 测试 .概要 测试 、 详 
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窗口 大 小 全: 


(832 x 624， 最 大 值 ) 
0024 x 768 ， 最 大 值 ) 


连接 违 度 品 ) :354 本/ 秒 


图 13-7 “状态 栏 " 首 选 参数 设置 


细 测 试 及 整体 测试 等 ,每 一 项 测试 又 包含 很 多 子 项 目的 测试 。 在 测试 中 还 会 借助 于 其 他 相 
关 专业 测试 软件 进行 测试 ,在 此 就 不 袭 述 了 。 

知识 5 空间 申请 和 网 站 发 布 

1. 空间 申请 

网 页 设计 与 制作 完成 之 后 ,只 能 在 本 地 计算 机 上 用 浏览 器 浏览 。 若 要 让 更 多 的 人 浏览 
就 必须 放 到 因特网 的 Web 服务 器 上 。 如 果 本 地 计算 机 就 是 一 个 Web 服务 器 , 则 可 以 将 网 
站 通过 本 地 开设 的 Web 服务 器 进行 发 布 。 但 是 对 于 大 多 数 用 户 来 说 ,在 本 地 开设 Web 服 
务 器 ,不 仅 成 本 较 高 ,而 且 维护 起 来 比较 麻烦 ,所 以 大 多 数 用 户 都 是 到 网 上 寻找 主页 空间 。 
网 络 上 提供 的 主页 空间 有 两 种 形式 : 收费 的 主页 空间 和 免费 的 主页 空间 。 目 前 ,有 很 多 网 
络 公 司 免费 为 用 户 提供 个 人 主页 空间 ,而 且 有 的 服务 非常 周到 。 当 用 户 向 该 公司 填写 好 包 
含 个 人 信息 和 网 站 内 容 介绍 的 申请 后 ,一 般 都 能 在 一 定时 期 内 收 到 回复 ,获得 公司 提供 给 用 
户 预先 设置 的 密码 。 这 样 , 用 户 便 拥有 了 该 公司 服务 器 上 的 账户 ,就 可 以 上 传 网 页 了 。 

2. 网 站 发 布 

当 网 页 制作 与 测试 完成 并 拥有 网 页 空间 后 ,就 可 以 将 网 站 传送 到 远程 的 服务 器 上 了 。 
通常 网 页 上 传 有 以 下 三 种 方式 。 

(1) 直接 复制 文件 

利用 磁盘 、 网 络 共享 文件 的 形式 将 网 页 直接 复制 到 服务 器 上 的 相应 目录 下 ,或 直接 在 服 
务 器 上 制作 完成 。 这 种 方式 不 适合 远程 管理 。 

(2) 使 用 Dreamweaver 上 传 文件 

Dreamweaver 本 身 附 带 有 文件 传输 协议 的 上 传 和 下 载 功能 ,可 以 方便 地 进行 网 站 的 上 
传 .下 载 和 文件 管理 。 操 作 步 又 如 下 。 
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@ 在 Dreamweaver 中 编辑 需要 上 传 的 站 点 ,在 打开 的 “编辑 站 点 "对话 框 中 ,选择 “高 
级 "选项 卡 。 在 左 侧 的 “分 类 ”中 选择 “远程 信息 ”。 
@ 在 对 话 框 的 右 侧 进行 远程 信息 的 设置 。 在 “访问 ”下拉 列表 中 选择 FTP 模式 ; 在 
“FTP 主机 ”文本 框 中 输入 上 传 网 站 文件 的 FTP 主机 名 ; 在 “登录 ”文本 框 中 输入 申请 空间 
时 的 用 户 名 ; 在 “密码 ” 框 中 输入 申请 空间 时 的 密码 ,如 图 13-8 所 示 。 


FE 机 Use 
Haorm 
生 录 台 ): [49130 Ww| 
密码 @): eve J 保存 

人 使 用 Passive FIP @) 

厂 使 用 ITv6 传输 模式 开 ) 

信使 用 防火 墙 双 ) 防火 墙 设置 四. 

厂 使 用 安全 FTP (GFTP) @) 


服务 器 兼容 性 中. | 
维护 同步 信息 @) 
厂 保存 时 自动 格 文件 上 传 到 服务 器 U) 
厂 局 用 存 回 和 取出 @@) 


取消 天助 


图 13-8 ”远程 信息 设置 


@ 完成 远程 信息 设置 后 , 单 击 * 测 试 ?按钮 ,可 测试 是 否 能 连接 到 服务 器 。 

@ 单 击 "确定 ”完成 “远程 信息 ”的 配置 。 

@ 单 击 “ 文 件 ” 面 板 中 的 上传” 按钮 . 即 可 上 传 网 站 ,根据 连接 的 速度 和 文件 大 小 的 不 
同 ,上 传 网 站 需要 经 过 一 段 时 间 , 上 传 的 这 些 文 件 将 构成 远程 站 点 。 上 传 后 , 单 击 站 点 管理 
器 上 方 的 “展开 以 显示 本 地 和 远 端 站 点 ?按钮 ,就 可 以 看 到 站 点 文件 已 被 上 传 到 主机 目录 
中 了 。 

(3) 使 用 CuteFTP 上 传 文件 

CuteFTP 是 一 款 非 常 优秀 的 商业 级 FTP 客户 端 程序 。 在 目前 众多 的 FTP 软件 中 ， 
CuteFTP 因为 其 使 用 方便 、 操 作 简 单 而 备 受 网 站 建设 者 的 青睐 。 
内 许多 软件 下 载 网 站 上 都 提供 CuteFTP 软件 的 下 载 ,在 搜索 引擎 中 利用 关键 词 
“CuteFTP 下 载 ?进行 检索 ,就 会 出 现 很 多 提供 下 载 的 网 址 。 当 下 载 安 装 该 软件 之 后 ,首先 
要 进行 简单 的 设置 ,其 中 包括 服务 商 提供 的 服务 器 IP 地 址 、 网 站 服务 器 用 户 名 称 以 及 密码 
等 ,如 图 13-9 所 示 。 当 设置 完成 后 , 单 击 “ 连 接 ” 按 钮 即 可 接 通 到 服务 器 。 这 样 ,只 需 按照 该 软 
件 提供 的 “向 导 ” 操 作 即 可 将 设计 好 的 本 地 硬盘 上 的 网 站 文件 上 传 到 网 站 空间 ,如 图 13-10 
所 示 。 


知识 6 Access 数据 库 的 压缩 和 修复 
Office 的 Access 软件 自 带 有 Access 数据 库 压缩 功能 ,可 以 利用 这 个 功能 压缩 和 修复 


& 


=9lxl 
文件 (E) 编辑 (E) 安全 (5) 
日 口 宇 FP 点 站 点 标签 
D ms evnesim 
FIP 主机 地 址 0D; 
Pe.73.64.78 
FIP 站 点 用 户 名 称 由: 
(9130 
FIP 站 点 密码 的 
rrr 
FTP 站 点 连接 端口 CD)- 
1 
车 录 类 型 一 一 一 一 一 一 一 一 
5 联 天 0 
三 匿名 必 ) 
广 两 者 @) 
新建 加. | 向 导 曙 .| 导入 四).… | 编辑 到 | 
FE 


图 13-9 _ CuteFTP 站 点 设置 


(ey 7% webDesign (76.73,64.78) - GlobalSCAPE, Inc. - CuteFTP 5.0 Xp 


文件 (E) 编辑 (E) 查看 (y) 书签 (B) 命令 (C) 传输 ID 窗口 (Ww) 帮助 


-一 
ERI elelelEs EE 
> 已 成 功 发 ba pg 
正在 发 送 dawoqyusqunp3 

PASY 

227 Entering Passive Mode (76,73,64,78,11,213) 

STOR dawoquyueqiu,mp3 

正在 天 所 sochet 

150 Opening BINARY mode data connection for daiwoquyueqiu,mp3, 


0 2010-5-20 
162 2010-5-20 
454 2010-5-21 
463 2010-5-21 
276 2010-5-26 
426 2010-5-21 
637 2010-5-21 


尼 用 00006 “出 条 00035 ”看 Tr Te 「 雄 到 :0KB70+KB Ta 


图 13-10 ”CuteFTP 上 传 文件 


数据 库 。 用 Access 打开 网 站 数据 库 , 选 择 “ 工 具 ”|“ 数 据 库 实用 工具 ”命令 , 即 可 实现 Access 


数据 库 的 压缩 和 修复 。 可 以 发 现 压缩 以 后 的 数据 库 文件 会 减少 很 多 。 


也 可 以 用 ASP 编程 的 方法 实现 数据 库 的 压缩 。 下 面 的 代码 就 是 用 ASP 实现 Access 


数据 库 服务 器 压缩 和 修复 的 全 部 代码 。 
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<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "65001" 委 > 

< html xmlns = "http://www. w3.org/1999/xhtml"> 

< head ><meta http - equiv = "Content ~ Type" content = "text/html; charset =utf -8" /> 
<title> 压 缩 Access 数据 库 </title></head> 

< 和 

Const JET 3X = 4 

Function CompactDB(dbPath，boolIs97) 

Dim fso, Engine, strDBPath 

strDBPath = left(dbPath, instrrev(DBPath,"\")) 

Set fso = CreateObject("Scripting. FileSystemObject") 

If fso.FileExists(dbPath) Then 

Set Engine = CreateObject("JRO.JetEngine") 

If boolIs97 = "True" Then 

Engine. CompactDatabase "Provider = Microsoft. Jet. OLEDB. 4. 0;Data Source= " & dbpath, _ 
"Provider = Microsoft. Jet. OLEDB. 4. 0;Data Source =" & strDBPath & "temp. mdb;" _ 

& "Jet OLEDB:Engine Type = " & JET 3X 

Else 

Engine. CompactDatabase "Provider = Microsoft. Jet. OLEDB. 4. 0;Data Source= " & dbpath, _ 
"Provider = Microsoft. Jet. OLEDB. 4. 0;Data Source =" & strDBPath & "temp. mdb" 

"产生 一 个 新 的 临时 数据 库 文件 temp. mdb 

End If 

"复制 新 的 数据 库 文件 temp. mdb 覆盖 压缩 前 的 文件 

fso. CopyFile strDBPath & "temp. mdb", dbpath 

fso. DeleteFile( strDBPath & "temp. mdb") "删除 新 的 临时 数据 库 文件 temp. mdb 

Set fso = nothing 

Set Engine = nothing 

CompactDB = "您 所 指定 的 数据 库 ，”& dbpath & "已 经 使 用 过 压缩 . ”& vbCrLf 


Else 
CompactDB = "请 检查 您 的 数据 库 路 径 ." & vbCrLf 
End If 
End Function 
> 
<body> 
< form action= "yasuoDatabase.asp" method= "post" name = "zipdata"> 
数据 库 地 址 : 
< label for = "dbpath"></label > 
< input type = "text" name = "dbpath" value = "data. mdb" /> 
< input type = "checkbox" name = "boodlIs97" value = "True"> 
ACCESS97 数据 库 
< input type = "submit” name = "submit”value = "压缩 数据 库 "> 
</form> 


<% Dim dbpath, boo1Is97 

dbpath = request("dbpath") 

boolIs97 = request("boolIs97") 

If dbpath <> "" Then 

dbpath = server. mappath(dbpath) 

response. write( CompactDB( dbpath, boolIs97)) 
End If S$%> 

</body ></html > 
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代码 说 明 : 

ASP 提供 了 Engine. CompactDatabase 的 方法 来 实现 数据 库 的 压缩 。 这 段 程序 实际 上 
是 用 一 个 表单 输入 数据 库 路 径 ,注意 这 里 的 数据 库 路 径 用 的 是 文档 相对 路 径 。 然 后 调 
Engine. CompactDatabase 来 实现 数据 库 的 压缩 。 压 缩 以 后 会 产生 一 个 新 的 临时 数据 库 文 
件 temp. mdb, 将 这 个 压缩 后 的 临时 数据 库 文件 复制 并 覆盖 以 前 的 数据 库 文件 ,最 后 删除 这 
个 临时 的 数据 库 文件 。Access 数据 库 压 缩 的 网 页 运行 效果 如 图 13-11 所 示 。 


沁 压缩 Access 数 据 库 - Windows Internet Explorer 
文件 人 ) ”编辑 下 ) 查看 @) 收藏 由 工具 人 帮助 人 D 


@aa -日 国 国信 Pa 站 tax 加 全 -对 国 - 癌 


地 让 加 | 撞 http://1ocslhost/website_spp/chapterl3/yasuoDatabsse. asp v 园 芭 全 和 $ 扫 - 因 进 择 


数据 库 地 址 ， [datamdb 


鲍 本 地 Intranet 


图 13-11 用 ASP 程序 压缩 Access 数据 库 


知识 7 使 用 ASP Encoder 对 网 页 进行 加 密 站 


可 以 从 网 络 上 下 载 ASP Encoder 进行 安装 ,ASP Encoder 有 字符 命令 版 和 界面 版 两 
种 。 字 符 版 使 用 命令 进行 网 页 加 密 ,界面 版 则 在 窗口 下 进行 操作 。 

1. 字符 版 ASP Encoder 

从 微软 官方 网 站 下 载 中 心 可 以 下 载 到 Script Encoder 加 密 程序 ,这 是 一 个 字符 版 的 
ASP 加 密 程序 。 下 载 完 后 安装 即 可 在 安装 目录 中 出 现 一 个 screnc. exe 文件 。 在 字符 界面 
下 面 运行 这 个 工具 即 可 实现 ASP 文件 的 加 密 。 例 如 ,要 把 d:\a. asp 文件 加 密 存放 到 d:\b. 
asp, 可 以 运行 以 下 命令 。 

screnc d:\a.asp d:\b. asp 


screnc 可 以 直接 对 ASP 文件 进行 加 密 。 相 关 参 数 如 下 ,使 用 这 些 参数 可 以 对 ASP 
Encoder 的 加 密 输出 进行 设置 。 

(1) /s: 可 选 。 让 Script Encoder* 安 静 ” 地 工作 ,不 输出 执行 过 程 。 

(2) /f: 可 选 。 是否 覆盖 同名 文件 。 

(3) /xl: 可 选 。 是 否 在 . asp 文件 的 顶部 添加 @Language 指令 。 

(4) /1: 可 选 ,默认 脚本 语言 。 

(5) /e: 指定 待 加 密 文件 的 文件 扩展 名 。 

2. 界面 版 ASP Encoder 

现在 网 络 上 也 有 很 多 操作 界面 方便 的 ASP Encoder, 这 些 工具 不 需要 输入 命令 ,直接 选 
择 输入 输出 的 文件 夹 即 可 完成 加 密 操作 。 如 图 13-12 所 示 是 ASP Encoder 的 工作 界面 , 选 
择 输入 输出 的 文件 夹 ,再 单 击 Start 按钮 , 即 可 对 一 个 文件 夹 中 的 ASP 网 站 进行 加 密 。 
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图 13-12 使 用 ASP Encoder 加 密 网 页 


选择 菜单 File| Option 命令 可 对 ASP Encoder 的 加 密 进 行 设置 。 如 图 13-13 所 示 , 可 以 
设置 默认 网 页 服务 器 脚本 、 默 认 客 户 端 脚本 和 加 密 文件 类 型 等 。 


DelaukLanguage for ASP fles。 vBScrpt ok 
Detaukt Language for HTML fles hserpt Cancel 

Scipt blocks wih no language defined are assumed lo be these languages 
厂 Dont add the ‘@language' directive to the top of al ASP Pages 


File Types 


(Active Servet Page (“ASP) Files 

oescitt sl ie el 

ya HTML <HTML.HTM] fles 。 same relative path in the target 
tandard HTML [* ] -5 

Wy VEScrpt VES) Fied 

Fre OltherFie Extensions that are ASP 


图 13-13 ASP Encoder 的 设置 


知识 8 网 站 的 宣传 与 推广 


1. 注册 到 搜索 引擎 

搜索 引擎 就 是 一 些 用 来 为 用 户 提供 搜索 功能 的 网 站 。 用 户 通常 通过 搜索 引擎 查找 自己 
所 需要 的 网 站 或 信息 ,然后 根据 搜索 到 的 结果 单 击 所 需要 的 网 站 。 所 以 ,网 站 如 果 可 以 出 现 
在 搜索 引擎 的 结果 中 ,就 可 以 使 大 量 的 人 访问 自己 的 网 站 。 

搜索 引擎 一 般 有 自动 收录 功能 ,网 站 运行 一 段 时 间 以 后 ,搜索 引擎 可 能 根据 网 站 的 域名 
搜索 到 自己 的 网 站 ,并 且 遍 历 网 站 中 所 有 的 网 页 。 对 网 站 中 的 网 页 进行 分 析 , 当 用 户 查 找 相 


名 13 模 块 ”网 站 测试 发 布 与 宣传 推广 309/ 


关 的 关键 字 时 ,自己 的 网 站 就 可 以 出 现在 搜索 的 结果 中 。 

谷歌 .百度 和 雅虎 等 著名 搜索 引擎 都 可 以 给 网 站 带 来 大 量 的 流量 。 一 些 较 小 的 搜索 引 
擎 ,如 一 搜 . 北 大 天 网 等 网 站 也 可 以 给 自己 的 网 站 带 来 一 定 的 流量 。 

但 搜索 引擎 并 不 一 定 能 自动 搜索 并 添加 自己 的 网 站 ,搜索 引擎 都 有 网 站 手动 添加 功能 。 
需要 把 网 站 的 域名 和 相关 信息 手动 添加 到 搜索 引擎 中 。 如 图 13-14 所 示 为 百度 的 搜索 引擎 
登录 入 口 。 在 搜索 引擎 的 网 站 登录 网 页 中 提交 自己 的 网 站 以 后 ,搜索 引擎 会 在 很 短 时 间 内 
收录 自己 的 网 站 。 


当 百度 搜索 各 助 中 必 - 网 站 嫩 录 -Windors Interaet Explerer PE 
TITTTET TY Ey 
境 址 加 | 本 http://rrr_ hatda con/seareh/ orl_sobenit htal ~ 加 9 ENA - 因 达 三 


Bai 癌 EE 度 网站 登录 要 助 中 心 


搜索 帮助 百度 推广 网 站 登录 百度 首页 
网 站 登录 


， 一 个 免费 登录 网 站 只 需 提 交 一 页 (首页 ) ， 百 座 搜索 引 莹 会 自动 收录 网 页 。 
， 符合 相关 标准 您 提交 的 册 址 ， 会 在 1 个 月 内 校 百度 抬 索 引 获 收录 标准 被 处 理 . 
， 百度 不 保证 一 定 能 收录 您 提交 的 网 站 


{Ms http://www. baidu. com) 
ttp// www, sohu con 


WA TE 下 GE 


-一 加 入 百联 加 ， 让 外 长 吾 需要 加 强大 ! 一 使用 百度 计 ， 全 面 人 化 网站 1 


， 百度 向 广大 用 户 开放 中 文 搜索 代码 ， 完 全 免 血 ， 正 式 授权 。 
， 只 要 加 上 百度 搜索 代码 ， 雹 的 网 站 就 可 获得 同 百度 一 样 强大 的 搜索 功能 1 
一 点 此 免费 下 载 百度 搜索 代码 


=== Cz010 paidu 沈 责 两 明 本 
前 CEE 


图 13-14 在 百度 网 站 登录 网 页 添加 网 站 


下 面 是 一 些 常 见 搜索 引擎 网 站 的 登录 入 口 。 

(1) Google 免费 登录 入口: http://www. google. com/intl/zh-CN/add_url. html。 

(2) 百度 免费 登录 入口: http://www. baidu. com/search/url_submit. html。 

(3) 雅虎 免费 登录 入 口 : http://search. help. cn. yahoo. com/h4_4. html。 

(4) 网 易 有 道 免费 登录 入 口 : http://tellbot. youdao. com/report。 

(5) 腾讯 搜 搜 免费 登录 入 口 : http://www. soso. com/help/usb/urlsubmit. shtml。 

(6) 天 网 免费 登录 入 口 : http://home. tianwang. com/denglu. htm。 

(7) 新 浪 免费 登录 入 口 : http:/ /bizsite. sina. com. cn/ newbizsite/ docc/index-2jifu-09. htm。 

(8) 中 搜 网 免费 登录 入 口 : http://ads. zhongsou. com/register/page. jsp。 

2. 登录 到 导航 网 站 

导航 网 站 是 一 种 专门 用 来 为 访问 用 户 提供 访问 链接 的 网 站 。 在 这 种 网 站 上 ,有 很 多 网 
站 按照 一 定 的 分 类 排列 在 一 起 ,用 户 可 以 很 方便 地 根据 网 页 上 的 分 类 找到 自己 所 需要 的 网 
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站 。 导 航 网 站 的 访问 量 常常 很 大 ,可 以 给 网 站 带 来 很 大 的 访问 流量 。 著 名 的 网 址 导航 网 站 
有 360 网 址 导航 .hao123 和 谷歌 265。 可 以 向 这 些 网 站 提交 链接 申请 ,申请 加 入 自己 网 站 的 
名 称 和 链接 。 

用 户 可 以 在 不 同 的 导航 网 站 登录 自己 的 网 站 。 如 图 13-15 所 示 为 在 谷歌 265 上 注册 自 
己 的 网 站 。 


3 网 站 提交 .285 上 网 肝 航 Windoys Internet Erplorer 
文件 四 蝙 锚 EE) 查看 WD 收 荣 各 工具 GD) 帮助 吕 
培 给 加 和 http: /ww 285 com/ subeit. htnl SE 
关闭 目录 各 265 上 同 引航 》 网 站 提交 四 
| ms | 
255 上 网 导 航 | 
ER 获 馆 推荐 喜爱 的 网 站 到 265: 
常见 问题 
帮助 论坛 推荐 网 址 “ 
网 站 名 称 
推荐 分 类 
网 站 描述 
给 265 的 意见 
四] 【265 上 网 导航 】 实 用 方便 上 网 首 迁 ,请 向 你 的 朋友 们 推荐 255_ COn? 才 Internet ml 


图 13-15 在 谷歌 265 中 注册 自己 的 网 站 


3. 友情 链接 

网 站 上 有 一 些 链接 是 指向 其 他 网 站 的 链接 , 单 击 这 些 链 接 时 会 打开 其 他 网 站 的 网 页 ,这 
种 链接 就 是 友情 链接 。 如 图 13-16 所 示 为 “中 国 传媒 大 学 "网 站 首页 底部 中 的 文字 导航 链 
接 ,这 种 友情 链接 就 是 在 网 页 的 底部 用 表格 的 方式 排列 出 需要 注意 链接 的 网 页 。 


， 中华 人民 共和 国教 育 部 * ”中国 传媒 大 学 南 三 学 院 ， ”人 民 网 传媒 频道 

， 视 友 网 * 高校 传媒 联盟 ， ”中 国 传媒 大 学 出 版 社 
"传媒 青年 网 "新 华 网 传媒 频道 "党 风 康 政 建设 之 窗 

， 中国 传媒 大 学 电视 台 ”中国 传媒 大 学 校 报 ， ”校园 广播 台 

， ”中 国 传媒 大 学 艺术 教育 部 ， 北 广 在 线 ”中国 教育 电视 台 

， ”中 传 嘉 艺 “* ”中 国 传媒 大 学 WBA 学 院 * 中 国 广播 网 

， 首都 教育 60 年 人 物 专 栏 “中 国 传媒 大 学 学 生 会 *。 校 社团 联合 会 官方 网 站 


图 13-16 网 页 中 的 文字 友情 链接 


1/ | 


当然 ,网 页 中 除了 文字 链接 之 外 ,还 可 以 使 用 Logo 图 片 导航 链接 。 这 种 友情 链接 网 站 


的 Logo 链接 到 其 他 站 点 上 。 制 作 精 美的 Logo 图 片 可 以 吸引 用 户 的 点 击 访问 。 如 图 13-17 
所 示 为 “中 国 传媒 大 学 ”网 站 首页 中 的 Logo 图 片 友 情 链接 。 


在 某 些 网 站 上 发 布 网 络 广告 。 用 户 在 访问 这 些 网 站 时 ,可 以 单 
击 这 些 网 络 广告 链接 到 自己 的 网 站 上 。 


告 等 形式 。 如 果 是 图 片 动画 等 形式 的 广告 ,就 需要 有 较 好 的 广 
告 创意 ,能 给 用 户 留 下 很 深 的 印象 ,以 此 吸引 用 户 的 点 击 。 


会 对 自己 的 网 站 有 很 好 的 推广 效果 。 这 些 网 络 广 告 的 收费 可 能 


4. 网 络 广告 
为 了 使 自己 的 网 站 在 短期 内 被 大 量 用 户 知道 和 访问 ,可 以 


网 络 广告 可 能 是 文字 链接 、 图 片 广告 .动画 广告 和 弹出 式 广 


大 型 门户 网 站 的 访问 量 大 ,在 大 门户 网 站 上 投放 网 络 广告 


是 计时 或 计 次 的 。 如 果 是 计 次 的 网 络 广告 ,广告 服务 器 会 统计 


广告 的 有 效 点 击 次 数 ,然后 根据 这 些 有 效 的 点 击 次 数 进行 广告 ”图 1317 网 页 中 的 Logo 


费用 结算 。 如 图 13-18 所 示 为 "天 涯 社区 ”的 网 络 广告 。 a 


汪 天 沂 社 区 _ 全 球 华人 网 上 家 同 -Yindors Internrt Fxplorer -| 有 其 
文件 中) 岗 酸 @) 查看 0 收藏 工具 0) 碍 助 00 [3 


-日 国 国 给 万 周南 mr 已 合 -总 国 - 口 回 
娘 姓 加 | 他] http://r tiays eny 
拉 天 革 ， 与 54039484 公 天 大 人 共同 大 汉人 的 网 轩 人 入 [THETTESTT3 


用 户 名 Ba 口 和 动用 录 人 


ZE 河内 入 知 己 天 诠 若 比 和 
pad 


Copymghte 1999 -2011 天 湛 H 区 所 所有 :志和 鳃 
增 信 电信 生 务 受 霹 许可 证 ( 王 )B2-20060032 呈 文 同文 [2009]162 号 网 络 视听 许可 证 2110566 号 (大) 缀 营 性 -2005-0002 “~ 
| 国 Internet 


关于 天 左 | 广告 服务 | 开放 平台 天涯 客 肤 。 障 私 和 版 权 | 联系 我 们 加 入 天 渗 
天 至 HE 


图 13-18 “天 涯 社区 ?网 站 首页 的 网 络 广告 


5. 发 布 信息 推广 
网 络 中 有 很 多 免费 自由 发 布 信息 的 空间 ,如 留言 板 . 论 坛 和 博客 等 ,都 可 以 自由 发 布 各 


种 信息 。 用 户 在 查看 这 些 信息 时 ,可 能 打开 这 些 信 息 中 留 下 的 网 站 或 链接 。 


在 进行 网 站 推广 时 ,可 以 到 相关 网 站 留言 板 中 留言 , 留 下 网 站 的 相关 信息 。 对 于 供求 类 
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会 
网 站 ,可 以 在 网 站 上 发 布 自己 网 站 的 产品 信息 和 供求 信息 ,并 添加 自己 网 站 的 链接 。 用 户 在 
查看 这 些 信息 时 就 可 能 会 浏览 自己 的 网 站 。 

论坛 和 博客 常常 有 大 量 的 用 户 , 而 且 有 很 多 用 户 访问 发 布 的 信息 ,所 以 ,论坛 和 博客 对 
网 站 推广 有 很 大 的 作用 。 可 以 在 博客 的 网 站 上 开设 一 个 和 网 站 信息 相关 的 博客 ,经 常 发 布 
一 些 与 网 站 信息 相关 的 产品 和 图 片 等 内 容 , 并 积极 参与 博客 或 论坛 的 交流 ,在 发 布 的 内 容 中 
加 入 自己 的 网 站 的 信息 ,这 样 可 以 带 来 一 定 的 网 站 点 击 量 。 

比如 可 以 到 天 涯 论坛 发 布 一 些 自己 网 站 的 推广 信息 ,或 者 利用 新 浪 、 网 易 和 搜狐 等 博客 
发 布 网 站 推广 信息 。 如 果 网 站 的 用 户 群体 有 一 部 分 是 学 生 , 可 以 考虑 到 一 些 重 点 高 校 的 论 
坛 发 布 网 站 推广 信息 。 这 些 论坛 有 清华 大 学 的 水 木 清 华 (bbs. tsinghua. edu. cn)、 华 中 理工 
的 白云 黄 稚 bbs (bbs. whnet. edu. cn) 和 西安 电子 科技 大 学 的 西 电 好 网 (http://www. 
xdnice. com/ ) 等。 

6. 传统 广告 和 户外 广告 

传统 广告 和 户外 广告 的 形式 已 经 被 绝 大 多 数 群体 所 接受 ,广告 的 覆盖 面 广 ,影响 力 大 ， 
能 对 网 站 起 到 很 好 的 推广 效果 。 网 站 完成 后 ,可 以 选择 报纸 、 电 视 、 公 交 车 体 广 告 ,公交 移动 
电视 广告 ,公交 站 牌 广 告 和 户外 墙 体 广 告 等 形式 ,对 自己 的 网 站 进行 有 针对 性 的 宣传 和 推 
广 。 如 果 是 针对 电子 商务 网 站 和 公司 产品 推广 网 站 ,这 种 有 针对 性 的 广告 可 以 在 短 时 间 内 
取得 较 好 的 广告 回报 受益 。 


知识 9” 网 页 维护 更 新 


网 站 正常 运行 以 后 ,每 隔 一 段 时 间 需 要 对 网 站 内 容 进行 更 新 。 网 站 中 的 网 页 通常 有 静 
态 网 页 和 动态 网 页 ,静态 网 页 的 更 新 就 是 增加 新 的 网 页 内 容 。 动 态 网 页 的 更 新 可 以 在 网 站 
后 台 直 接 进行 操作 。 

1. 静态 网 页 的 维护 更 新 

静态 网 页 制作 完成 后 ,维护 和 更 新 需要 重新 设计 制作 新 的 网 页 。 或 者 在 原 有 网 页 的 基 
础 之 上 进行 修改 ,添加 相应 的 网 页 内 容 。 设 计 制 作 新 的 网 页 时 应 该 注意 和 网 站 的 风格 保持 
一 致 。 最 后 ,将 新 建 的 网 页 和 已 经 更 新 的 网 页 上 传 到 服务 器 覆盖 原 网 页 即 可 。 

(1) 网 页 更 新 。 如 果 需 要 更 新 网 页 的 具体 内 容 和 网 页 效果 ,就 需要 重新 设计 网 页 。 这 
时 可 以 重新 设计 网 页 效果 图 和 网 页 的 布局 ,更 新 后 重新 上 传 到 网 站 的 服务 器 空间 即 可 。 

(2) 资源 文件 更 新 。 网 页 如 果 只 更 新 资源 文件 而 不 更 新 其 他 内 容 , 如 只 更 新 图 片 \ 动 画 
和 视频 文件 等 ,可 以 将 修改 后 的 资源 文件 重 命名 和 原来 一 样 的 文件 名 ,然后 上 传 到 服务 器 履 
盖 以 前 的 文件 即 可 。 

2. 动态 网 页 的 更 新 

动态 网 页 的 更 新 可 分 为 数据 库 内 容 更 新 和 网 站 功能 的 更 新 。 

动态 网 站 设计 完成 之 后 ,一般 部 有 比较 完整 的 网 站 内 容 管 理 功 能 。 网 站 的 后 台 可 以 方 
便 地 对 数据 库 的 内 容 进 行 管理 和 更 新 。 而 前 台 网 页 的 内 容 通常 是 从 后 台数 据 库 提取 的 ,这 
样 只 要 更 新 了 后 台数 据 库 的 内 容 , 前 台 网 页 的 内 容 就 自动 更 新 了 。 如 图 13-19 所 示 即 为 本 
书 所 设计 制作 的 “ 易 购 商城 ”网 站 后 台 商 品 管理 页 面 。 通 过 本 页 面 可 以 实现 对 商品 信息 的 发 
布 ,修改 和 删除 等 常用 功能 。 

但 当 需 要 修改 或 添加 动态 网 站 的 功能 时 ,就 需要 修改 网 站 功能 代码 或 编写 新 的 功能 代 
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图 13-19 “ 易 购 商城 "后 台 商品 管理 页 面 


码 。 这 些 修 改 或 新 添加 的 网 站 功能 还 需要 进行 一 定 的 测试 ,测试 通过 后 把 这 些 修 改 或 添加 
的 网 页 上 传 到 服务 器 即 可 。 
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任务 ”Access 数据 库 的 备份 与 恢复 


任务 背景 

网 站 发 布 之 后 需要 定期 地 对 网 站 的 数据 库 进 行 备份 。 

任务 要 求 

要 求 为 后 台 管 理 员 提 供 “ 压 缩 数据 库 ”“ 备 份 数 据 库 ” 和 "恢复 数据 库 " 等 功能 。 

【技术 要 领 】FileSystemO 〇 bject 对 象 的 使 用 。 

【解决 问题 】Access 数据 库 的 备份 和 恢复 。 

【应 用 领域 】 Access 数据 库 的 备份 和 恢复 。 

任务 分 析 

本 任务 主要 利用 FileSystemObject 对 象 的 CopyFile、DeleteFile 和 FileExists 等 方法 实 
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写 


现 数据 库 文件 的 备份 .恢复 和 删除 等 功能 。 
重点 和 难点 
FileSystemO 〇 bject 对 象 的 使 用 。 
操作 步骤 
(1) 创建 一 个 ASP 文件 manageDatabase. asp ,输入 如 下 代码 。 


<%(@LANGUAGE = "VBSCRIPT" CODEPAGE = "936" %> 
<html> 
<head> 
<meta http - equiv = "Content - Language" content = "zh— cn"> 
<meta http - equiv = "Content — Type" content = "text/html;charset = gb2312"> 
<title > 数据 库 管理 系统 </title> 
</head> 
<body> 
<div align = center > 数据 库 管理 系统 </div> 
<br> 
<br> 
<palign= "center"> 
< 
Dim ZC_DATABASE_PATH 
"数据 库 的 路 径 
ZC_DATABASE_PATH = "data. mdb" 
data array= Split(ZC DATABASE PATH,"/") 
Dim action 
action = trim(request("action")) 
Dim dbpath, bkfolder, bkdbname, fso, fsol 
Select Case action 
Case "" 
Call chushihua() 
Case "CompressData”' 压 缩 数据 
Dim tmprs 
dimallarticle 
dim Maxid 
dim topic, username, dateandtime, body 
call CompressData() 
case "BackupData”' 备 份 数据 
if request("act") = "Backup" Then 
call updata( ) 
else 
call BackupData( ) 
end If 
case "RestoreData”' 恢 复数 据 
dim backpath 
if request("act") = "Restore" Then 
Dbpath = request. form( "Dbpath" ) 
backpath = request. form("backpath") 
if dbpath="" Then 
response. write "Please input your database whole Name" 
else 
Dbpath = server. mappath( Dbpath) 
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end If 
backpath = server. mappath( backpath) 
Set Fso = server. CreateObject("scripting. filesystemobject") 
if fso. fileexists(dbpath) Then 
fso. copyfile Dbpath, Backpath 
response. write "数据 库 被 成 功 还 原 !< br >" 
else 
response. write " 没 找 到 您 所 需要 的 数据 库 !" 
end If 
else 
call RestoreData( ) 
end If 
Case "SpaceSize" ' 系 统 空 间 占用 
call SpaceSize( ) 
Case "deletebackup" 
Dim dbname 
dbpath = Request. QueryString( "dbpath") 
dbname = Request. QueryString( "dbname") 
dbpath = Server. MapPath( dbpath) 
dbpath = dbpath &"\"&dbname 
set fso = CreateObject("Scripting. FileSystemObject") 
If fso. FileExists(dbPath) Then 
fso. DeleteFile(DBPath) 
Set fso = nothing 
response. write "< br > 您 备份 的 数据 库 已 经 ”& dbpath &" 被 成 功 删除 !<br ><br ><a href = 
""manageDatabase.asp""> 返 回 ..</a>" 
Else 
response. write dbpath 
response. write "< br > 输入 的 路 径 错误 , 请 确认 后 重新 输入 !< br >< br ><a href = 
""manageDatabase.asp""> 返 回 ..</a>" 
End If 
Case Else 
End Select 
%> 
</div> 
<% 
response. write"</body ></html >" 
Sub chushihua() 
> 
<divalign= center> 
< form id = "edit"> 
<a href = "manageDatabase.asp?action = CompressData">[ 压缩 数据 库 ]</a> 
<a href = "manageDatabase.asp?action = BackupData">[ 备 份 数据 库 ]</a> 


<a href = "manageDatabase. asp?action = RestoreData">[ 还 原 数据 库 ]</a> 
<a href = "manageDatabase.asp?action = SpaceSize">[ 系 统 空间 占用 ]</a> 
</form> 

</div> 

<%end sub%> 

<% 


'= 


系统 空间 占用 = 
Sub SpaceSize() 
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On Error Resume Next 
多 > 

<divalign= center> 

<divalign= center> 


系统 空间 查看 
<form id= "edit"> 
<br> 


数据 库 :<% showSpaceinfo("../"&data array(1)&"")%><br><br> 
备份 数据 库 :<% showSpaceinfo("databackup") $><br><br> 
系统 总 共 :<% showSpaceinfo("/")%> 
<% response. write "<br><a href =""manageDatabase.asp""> 返 回 ..</a>" %> 
<br><br> 
</form> 
</div> 
<br> 
<br> 
<br> 
<a href = "manageDatabase.asp"> 返 回 ...</a> 
</div> 
< 
End Sub 
%> 
<% Sub ShowSpaceInfo(drvpath) 
dim fso,d, size, showsize 
set fso = server. CreateObject ("scripting. filesystemobject") 
drvpath = server. mappath( drvpath) 
set d= fso. getfolder(drvpath) 
size=d. size 
Showsize= size & " Byte" 
if size> 1024 Then 
size= (Size/1024) 
Showsize = Size & ”KB” 
end If 
if size>1024 Then 
size= (size/1024) 
showsize = formatnumber (size,2) & " MB" 
end If 
if size> 1024 Then 
size= (size/1024) 
showsize = formatnumber( size,2) & " GB" 
end If 
response. write "< font face = verdana >" & showsize & "</font >" 
manageDatabase.asp""> 返 回 ..</a>" 


response. write "<br ><a href = 
End Sub 

多 > 

<% 

Sub RestoreData() 

多 > 
<divalign= center> 
<divalign= center> 
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还 原 数据 库 : 
< form id = "edit" method = "post" action = "manageDatabase. asp? action = RestoreData&act = 
Restore"> 
还 原 的 路 径 ( 相 对 路 径 ) :< input type = text size = 30 name = DBpath value = "Databackup/Databack. 
mdb">( 默 认 的 ,可 手动 修改 保持 路 径 正确 )< BR> 
还 原 后 的 路 径 ( 相 对 路 径 ) :< input type = text size = 30 name = backpath value = "<% = ZC_DATABASE 
_PATH% >"><BR><BR> 
< input type = submit value = "开始 还 原 "> 
</form> 
</div> 
<br> 
<br> 
<a href = "manageDatabase.asp"> 返 回 ...</a> 
</div> 
< 和 
End Sub 
Sub updata() 
Dbpath = request. form( "Dbpath") 
Dbpath = server. mappath( Dbpath) 
bkfolder = request. form( "bkfolder") 
bkdbname = request. form( "bkdbname") 
Set Fso= server.CreateObject("scripting. filesystemobject") 
if fso. fileexists(dbpath) Then 
If CheckDir(bkfolder) = True Then 
fso. copyfile Dbpath, bkfolder& "\"& bkdbname 
else 
MakeNewsDir bkfolder 
fso. copyfile dbpath, bkfolder& "\"& bkdbname 
end If 
response. write "<br > 已 经 成 功 备份 , 你 的 数据 库 的 路 径 :" &bkfolder& "\"& bkdbname 
response. write "< br >< br > 点 击 此 处 将 数据 库 下 载 下 来 :<a href = """& ZC_BLOG_HOST 
&request. form("bkfolder") & "/" & bkdbname &""">" & ZC_ BLOG_ HOST & request. form("bkfolder") & 
"/" & bkdbname &"< br><br>" 
response. write "<br ><br ><a href = " "manageDatabase. asp?action = deletebackup&dbpath=" 
&request. form("bkfolder") g"gdbname = ”& bkdbname &"""> 当 您 下 载 完毕 后 ,点 击 此 处 将 删除 备份 
的 数据 库 !</a><br><br><br><a href =""manageDatabase.asp""> 返 回 ...</a>" 
Else 
response. write "Error ,, 找 不 到 文件 !< br >" 
End If 
Set fso = nothing 
End Sub 
We 检查 某 一 目录 是 否 存在 ----------------- 一 一 
Function CheckDir(FolderPath) 
folderpath = Server. MapPath(".")&"\"&folderpath 
Set fsol = CreateObject("Scripting. FileSystemObject") 
If fsol. FolderExists(FolderPath) Then 
' 存 在 
CheckDir = True 
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Else 
' 不 存在 
CheckDir = False 
End If 
Set fsol = nothing 
End Function 
Dee 一 根据 指定 名 称 生成 目录 
Function MakeNewsDir(foldername) 


dimf 

Set fsol = CreateObject("Scripting. FileSystemObject") 

Set f = fsol.CreateFolder(foldername) 

MakeNewsDir = True 

Set fsol = nothing 

End Function 

Sub BackupData() 

多 > 
<divalign= center> 

备份 数据 库 

<form id = "edit" method = "post" action = "manageDatabase. asp? action = BackupData&act = 
Backup"> 

当前 数据 库 的 路 径 ( 相 对 路 径 ):< input type = text size = 15 name = DBpath value = "<% = ZC_ 
DATABASE_PATH% >"> 

备份 数据 库 的 路 径 ( 相 对 路 径 ) :< input type = text size = 15 name = bkfolder value = "Databackup"> 
如 果 该 目录 不 存在 ,系统 将 自动 建立 

备份 后 数据 库 的 名 称 :< input type = text size = 20 name = bkDBname value = "Databack.mdb"> 手动 命 
名 (格式 asa, mdb,asp, accdb) 

如 果 备 份 文件 不 存在 将 建立 ,如 果 存 在 ,将 自动 覆盖 ! 

< input type = submit value = "开始 备份 "><br> 

</form> 

<br><br> 

<a href = "manageDatabase.asp"> 返 回 ..</a> 

</div> 

< 

End Sub 

Sub CompressData() 

多 > 

<divalign= center> 

压缩 数据 库 : 

< form id = "edit" action = "manageDatabase. asp?action = CompressData" method = "post"> 

输入 数据 库 的 所 在 路 径 

压缩 数据 库 的 路 径 :< input type = "text" name = "dbpath" value = "<% = 2ZC_DATABASE PATH%>"> 

< input type= "submit" value = "开始 压缩 "> 

< input type = "checkbox" name = "boolIs97" value = "True"> 如 果 是 Access 97, 请 将 色 打 上 . (默认 是 
Access 2000)<br><br> 

</form> 

<br><br> 

<a href = "manageDatabase.asp"> 返 回 ..</a> 

</div> 
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< 各 

Dim dbpath, boolIs97 

dbpath = request("dbpath") 

boolIs97 = request("boolIs97") 

If dbpath <> "" Then 

dbpath = server. mappath(dbpath) 

response. write( CompactDB( dbpath, boolIs97) ) 
End If 

End Sub 


压缩 参数 = 
Function CompactDB(dbPath，boolIs97) 
Dim fso, Engine, strDBPath,JET 3X 
strDBPath = Left(dbPath, InStrRev(DBPath, "\")) 
Set fso = CreateObject("Scripting. FileSystemObject") 
If fso. FileExists(dbPath) Then 

fso. CopyFile dbpath, strDBPath & "temp. mdb" 

Set Engine = CreateObject("JRO. JetEngine") 

If boolIs97 = "True" Then 
Engine. CompactDatabase "Provider = Microsoft. Jet. OLEDB. 4. 0; Data Source = " & strDBPath 

& "temp. mdb", _ 
"Provider = Microsoft. Jet. OLEDB. 4. 0;Data Source =" & strDBPath & "templ.mdb;" _ 
& "Jet OLEDB:Engine Type = " & JET_ 3X 

Else 

Engine. CompactDatabase "Provider = Microsoft. Jet. OLEDB. 4. 0; Data Source =" & strDBPath 

& "temp.mdb"，_ 
"Provider = Microsoft. Jet. OLEDB. 4. 0;Data Source = " & strDBPath & "templ.mdb" 

End If 

fso. CopyFile strDBPath & "templ. mdb", dbpath 

fso. DeleteFile( strDBPath & "temp. mdb" ) 

fso. DeleteFile( strDBPath & "templ.mdb") 

Set fso = nothing 

Set Engine = nothing 

CompactDB = "您 的 数据 库 ”& dbpath & "已 经 被 成 功 压 缩 !" & vbCrLf 


Else 
CompactDB = "< br > 您 输入 的 路 径 错误 , 请 确认 后 重新 输入 !" & vbCrLf 
End If 
End Function 
%> 
</p></body></html > 


(2) 程序 运行 的 效果 如 图 13-20 一 图 13-24 所 示 。 单 击 图 13-20 中 的 “系统 空间 占用 ” 超 
链接 ,打开 如 图 13-24 所 示 的 “系统 空间 查看 ”界面 。 

程序 说 明 : 

(1) 本 页 代码 利用 Select…Case 多 分 支 结构 在 一 个 ASP 网 页 实现 数据 库 压 缩 、 备 份 和 
恢复 等 多 个 功能 ,总 体 思路 如 下 。 


< 和 
dim action 
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action = trim(request("action")) 
select case action 


case "" "初始 化 

Call chushihua() "调用 初始 化 函数 显示 如 图 13-20 所 示 中 的 4 个 超 链接 
case "CompressData" "压缩 数据 

call CompressData() ' 调 用 压缩 数据 库 函 数 , 显示 如 图 13-21 所 示 界 面 
case "BackupData" ' 备 份 数 据 


"调用 备份 数据 库 函 数 , 显示 如 图 13-22 所 示 界 面 
if request("act") = "Backup" Then 
call updata( ) 
else 
call BackupData( ) 
end If 
case "RestoreData" "恢复 数据 
Call RestoreData( ) ' 调 用 恢复 数据 库 函 数 ,显示 如 图 13-23 所 示 界 面 
end select 
先 > 


(2) 初始 化 函数 chushihua() 的 代码 如 下 。 


< 外 Sub chushihua() %> 

< div align = center> 

< form id= "edit"> 

<a href = "manageDatabase. asp?action = CompressData">[ 不 缩 数据 库 ]</a> 
manageDatabase. asp?action = BackupData">[ 备 份 数据 库 ]</a> 
manageDatabase. asp?action = RestoreData">[ 还 原 数据 库 ]</a> 
<a href = "manageDatabase.asp?action = SpaceSize">[ 系 统 空间 占用 ]</a> 
</form> 

</div> 

<% EndSub 外 > 


初始 化 函数 中 包含 4 个 超 链接 ,这 4 个 超 链接 都 跳 转 到 本 ASP 网 页 。 但 每 个 超 链接 都 
带 了 一 个 参数 值 不 同 的 参数 action。 当 单 击 不 同 的 超 链 接 时 ,manageDatabase. asp 网 页 会 
获得 参数 action 的 值 ,并 根据 该 值 显示 不 同 的 功能 (如 图 13-21 一 图 13-24 所 示 )。 如 果 本 
ASP 网 页 的 名 称 由 manageDatabase. asp 改 为 manageDB. asp, 则 需要 将 以 上 4 个 超 链接 中 
href 属性 的 目的 网 页 值 也 由 manageDatabase. asp 改 为 manageDB. asp。 


马 数据 库 管理 系统 - Yindews Internet Erplorer 
文件 G) 编辑 人 E) 查看 Q) 收藏 和 ) 工具 CD) 帮助 00 


@an- 日 因 国 的 Ps 丙 ax @ 全 -号 国 : 口 


起 址 上 | 类 http://1ocalhost/website_app/chepter13/nenegeDatsbase. amp 


数据 库 管理 系统 


压缩 数据 库 ] [备份 数据 库 ] [还 原 数据 库 ] [系统 空间 占用 ] 


饮 本 地 Intranet 


图 13-20 数据 库 管 理 初始 界面 


人 


沁 数据 库 管理 系统 - Tindows Internet Explorer 
文件 如 ”编辑 人 E) 查看 WW) 收 豪 和 ) 工具 0) 帮助 


四 银 - 园 国 国 他 万 生 赤 tx 加 区- 你 国 - 口 


地 站 四 省 http:/localhestWwebsite_spp/ehepterl3/asnageDatabase osp?ection=ConpressDete 


数据 库 管理 系统 


压缩 数据 库 : 


输入 数据 库 的 所 在 路 径 压缩 数据 库 的 路 径 :|aata ndb NE 
Access 97, 请 将 勾 打 上 . (默认 是 Access 2000) 


向 本 地 Intranet 


图 13-21 压缩 数据 库 界 面 


沁 数据 库 管理 系统 - Vindows Internet Explorer 
文件 E) 编辑 下 ) ”查看 WW 收 寞 由) 工具 CJ) 帮助 
四 银 : 加 四国 的 月 系 丙 tx 天 靳 -你 国 : 口 


地 外 冲撞 http://1ocalhost/website_spp/chapterl3/manageDatabase. asp?acticn=Backuplate SEa) 


数据 库 管理 系统 


备份 数据 库 

当前 数据 库 的 路 径 (由 对 路 径 ) :|data. nob 

如 果 该 目录 不 存在 , 系统 将 自动 建立 备份 后 数据 库 的 名 称 : Databack.ndb | 手动 命名 (格式 
asa mdb, asp, accdb) 如 果 备 份 文件 不 存在 将 建立 , 如 果 存在 , 将 自动 覆盖 ! 


备份 数据 库 的 路 径 (相对 路 径 ) :1Databackup | 


图 13-22 备份 数据 库 界面 
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沁 数据 库 管理 系统 - Yindows Internet Explorer 
文件 四 ”编辑 E) 查看 妨 收 诚 和 ) 工具 上 ) 帮助 


@ 红 -日 国 因 的 有 时 交 Wix 因 客 - 登 国 : 口 


地 址 四) | 秆 http:/1localhostyvabsite_app/ehapterl3/managsDatabase_ asp?action=RestoreData 


还 原 的 路 径 (相对 路 径 ) : Datsbackup/Databack 


还 原 后 的 路 径 (相对 路 径 ) 


图 13-23 还 原 数 据 库 界 面 


沁 数据 库 管理 系统 - Windows Internet Erplorer 
文件 EE) 编辑 E) 查看 W) 收藏 和 ) 工具 CD) 天助 人 D 


-日 昌国 给 记 时 交加 让- 对 国 -了 

地 站 加 镜 http://1ocalhost/website_app/chapterl3/nanageDatabase. asp?action=Spacesire v 轩 和 
数据 库 管 理 系 统 站 
系统 空间 查看 


数据 库 : 


备份 数据 库 :144 KB 
系统 总 共 :306.01 MB 
返回 .. 


饮 本 地 Intranet 


图 13-24 查看 系统 空间 界面 


知识 点 拓展 


ASP 是 一 种 解释 源码 的 语言 ,ASP 程序 所 有 的 内 容 都 是 以 纯 文 本 的 形式 存放 在 服务 器 
上 的 。 只 要 进入 了 服务 器 ,就 可 以 得 到 网 站 的 所 有 程序 和 控制 整个 网 站 的 数据 。 这 给 ASP 
程序 的 商业 化 应 用 和 软件 产权 保护 带 来 了 很 大 的 困难 。 

于 是 ,微软 针对 这 个 问题 推出 了 用 ASP Encoder 技术 对 ASP 网 页 进行 加 密 。 使 用 了 
ASP Encoder 技术 对 网 页 加 密 了 以 后 ,网 页 上 所 有 的 ASP 程序 内 容 全 部 加 密 为 无 法 识别 的 
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不 规则 代码 。 这 些 代码 依然 可 以 在 IIS 上 运行 ,但 不 能 被 改变 和 读 取 ,从 而 达到 了 保护 ASP 
程序 的 目的 。 
ASP Encoder 对 ASP 网 页 的 加 密 , 是 对 网 页 中 的 ASP 代码 进行 一 定 规则 的 替换 和 和 运 
算 , 使 之 成 为 不 可 识别 的 代码 。ASP Encoder 的 加 密 有 以 下 特点 。 
(1) ASP Encoder 只 对 ASP 网 页 中 的 程序 脚本 进行 加 密 , 而 网 页 中 的 HTML 标签 保 
持 不 变 。 网 页 中 的 客户 端 脚本 代码 也 可 以 被 加 密 。 
(2) ASP Encoder 对 网 页 中 的 脚本 进行 加 密 以 后 ,网 页 中 的 程序 无 法 被 读 取 , 且 网 页 中 
的 程序 脚本 就 作为 一 个 整体 ,增加 了 其 他 任何 网 页 就 无 法 运行 ,从 而 保护 了 程序 的 内 容 。 
(3) IIS 内 嵌 有 ASP Encoder 的 解释 功能 ,经 过 加 密 以 后 的 网 页 ,IIS 不 需要 第 三 方 插件 
就 可 以 正常 运行 。 
下 面 用 一 个 简单 的 网 页 程序 来 说 明 ASP Encoder 的 加 密 功 能 。 以 下 为 一 段 访问 数据 
库 测 试 数据 库 连 通 性 的 代码 。 
<% 
Set Conn = Server. CreateObject( "ADODB. Connection") 
Conn. Open "DSN = TestDSN" 
if Conn. State = 1 then 
Response. Write(" 数 据 库 打开 成 功 <hr >") 
end if 
Conn. Close 
if Conn. State = 0 then 
Response. Write(" 数 据 库 已 经 关闭 <br >") 
end if 
Set Conn = nothing 
%> 
对 这 段 代码 使 用 ASP Encoder 加 密 ,加 密 后 的 代码 如 下 。 加 密 后 的 代码 无 法 识别 ,这 
样 就 很 好 地 保护 了 代码 内 容 。 
<%@ LANGUAGE = VBScript.Encode %> 
<%H@~*JwEAAA== @#H@EP~,? YP;N UU+.\DV/M+1Dnr(L+ 10cJzf}f $R/G 
xnmDrW Jb@ # 人 @&PP 一 /KxUR}2 x~ rfU1': + kOfU1EG 上 @S&P 一 一 b0P;Gx 
R?DCO+ {F,Y4 + U@ #@&P~P, ~P, PJ]nkwWUd R Db0 下 数据 库 打开 成 功 @!tM@ x J x @#@&~P， 
+ UN, kW@ #(@ SPP, /W xR; SG/ @#@EP~PrW, ZGx 
?D10n{!1P04 x@ #@&, 一 ,P 一 ,P, 工 + kwKU/ R DbYncr 数据 库 已 经 关闭 @!4M@ x* Jx* @#@&, 一 一 + 
kW@ H#@E~, Pj + D 一 ZKxUx WY4ro@ #@So0gAAA ==^#~@%> 


职业 技能 知识 点 考核 


简 答题 

(1) 简 述 网 站 测试 的 内 容 。 

(2) 简 述 网 站 宣传 和 推广 的 常用 方法 。 

(3) 列举 一 些 常 见 搜索 引擎 网 站 的 登录 入 口 。 
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